Accordion on Sharepoint 2010 content query

问题

I am now trying to implement the accordion function for a content query webpart.

Basically, the content query structure looks like this: Title Content I want to expand collapse

<li class="dwft-item">
<div class="link-item"> Title </div>
<div class="description"> Content I want to expand collapse </div>
</li>



<li class="dwft-item">
<div class="link-item"> Title </div>
<div class="description"> Content I want to expand collapse </div>
</li>




<li class="dwft-item">
<div class="link-item"> Title </div>
<div class="description"> Content I want to expand collapse </div>
</li>

and I have 3-5 of them.

What I want to do now is to expand collapse the description div whenever I click on the corresponding link-item (title) div.

Here is my JS code:

$(document).ready(function () {
    //ACCORDION BUTTON ACTION
    $('#MSOZoneCell_WebPartWPQ3 .link-item').click(function () {
        //MAKE THE ACCORDION CLOSE ON THE SECOND CLICK
        if ($('#MSOZoneCell_WebPartWPQ3 .description').hasClass('openDiv')) {
            $('#MSOZoneCell_WebPartWPQ3 .description').toggle('normal');
            $(this).next().removeClass('openDiv');
        } else {
            $('#MSOZoneCell_WebPartWPQ3 .description').toggle('normal');
            $(this).next().toggle('normal');
            $(this).next().addClass('openDiv');
        }
    });
    //HIDE THE DIVS ON PAGE LOAD
    $("#MSOZoneCell_WebPartWPQ3 .description").hide();
});

The problem I have now is that whenever I click on any one of the titles, ALL the description div expands, which is not what I want because I want only that particular description under the title I clicked to expand.

Any help here will be much appreciated here ! Thanks!!

回答1:

Check these, I think one of them should be what you want. You were right to use this when adding/removing classes, you just needed to do that for the toggle as well:

http://jsfiddle.net/7dcj4/

$(document).ready(function () {
    //ACCORDION BUTTON ACTION
    $('#MSOZoneCell_WebPartWPQ3 .link-item').click(function () {
        //MAKE THE ACCORDION CLOSE ON THE SECOND CLICK
        var $content = $(this).siblings('.description');

        var visible = $content.is(':visible');

        $("#MSOZoneCell_WebPartWPQ3 .description:visible").toggle('normal');

        if (!visible)
            $content.toggle('normal');

    });
    //HIDE THE DIVS ON PAGE LOAD
    $("#MSOZoneCell_WebPartWPQ3 .description").hide();
});

http://jsfiddle.net/uBnrV/

$(document).ready(function () {
    //ACCORDION BUTTON ACTION
    $('#MSOZoneCell_WebPartWPQ3 .link-item').click(function () {
        //MAKE THE ACCORDION CLOSE ON THE SECOND CLICK
        $(this).siblings('.description').toggle('normal');
    });
    //HIDE THE DIVS ON PAGE LOAD
    $("#MSOZoneCell_WebPartWPQ3 .description").hide();
});

来源：https://stackoverflow.com/questions/19060237/accordion-on-sharepoint-2010-content-query

标签

jquery

sharepoint

accordion