1

Is there any way to make a document library web part require a user to click a drop-down arrow before it will show the user its contents?

I have a Wiki page that is full of document library web parts but it looks very cluttered and I want to have all the document libraries start folded up and require the user to click an arrow or something to expand the web part and see its contents.

2

As per your question, I understand that you are looking for Accordion style of web parts on your page.

enter image description here

To get this look you may need some JavaScript on your web part page. This you can add to your script editor.

<script>
function initWebPartsAccordianPanes(container) {
    var webParts = container.find(".ms-webpartzone-cell");
    $(webParts).each(function() {
        var accordianTitle = $(this).find(".ms-webpart-titleText").text();
        $(this).before("<div class='accordian-header'><h2>" + accordianTitle + "</h2></div>");
        $(this).addClass("accordian-body").hide();
    });
    bindAccordianEvents(container);
    container.find(".accordian-header:eq(0)").trigger("click");
}

function bindAccordianEvents(container) {
    $(container).find(".accordian-header").on("click", function() {
        if($(this).hasClass("active")){
            $(this).removeClass("active");
            $(this).next(".accordian-body").removeClass("active").hide();
        }else{
            $(this).addClass("active");
            $(this).next(".accordian-body").addClass("active").show();
        }

    });
}

$(document).ready(function() {  
    var container = $(".ms-webpart-zone");
    initWebPartsAccordianPanes(container);
});
</script>

And if you want to get the web part titles to render same as my sample. You can use below CSS.

<style type="text/css">
.accordian-header {
    padding: 5px;
    cursor: pointer;
    background-color: #a28e5c;
    width: 100%;
    color: #fff;
    margin-bottom: 10px;
}

.accordian-header h2 {
    color: #fff;
    background: url('../Images/arrow-right.png') no-repeat 0;
    padding-left: 20px;
    text-align: left;
}

.accordian-header.active h2 {
    background-image: url('../Images/down-arrow.png')
}
</style>
  • Do I need to wrap either of those in tags for them to work? – Mdomin45 Jun 9 '17 at 13:27
  • I have edited answer to add tags. – Venkat Konjeti Jun 9 '17 at 13:29
  • I have added the javascript to the content editor but for some reason it is not working. When I load the page, they look right at first but then when the page is fully loaded they go back to how they were. – Mdomin45 Jun 9 '17 at 13:32
  • Try to add these to Script Editor. Or Add all this code to one html file and refer that to your Content Editor Web Part. And one more this script works only if you have jQuery 1.9+ version file referred to site. If not been added jQuery reference Add this as first line of your code <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> – Venkat Konjeti Jun 9 '17 at 13:35
  • I tried adding that code to the beginning of the script editor and nothing changed. – Mdomin45 Jun 9 '17 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.