CODEWITHSUNDEEP
javascripttwitter-bootstrapaccordion
user2102726
user2102726

Reputation: 11

Expand/Collapse All with a nested accordion and non-accordion item: BOOTSTRAP

I'm about 2 months new to programming and Twitter Bootstrap, so please be kind!

I've done a lot of digging and searching, but am not sure I am using the correct terms so I figure I'd ask directly.

I am trying to create an Expand/Collapse all button that will expand or collapse all items under a Title Header. The items under a title header include a text piece and an image. I want to be able to expand/collapse the text piece by clicking on the Title Header. I want to be able to expand/collapse the text AND the image by clicking on the button.

The problem is: I want to button to expand/collapse everything regardless if the text piece is expanded or collapsed.

This is the jsfiddle: http://jsfiddle.net/mcfly303/XXXYn/1/

As you can see, the button will toggle items open or closed opposite of their current state. Is there a way to do a "universal" expand/collapse, regardless if the nested items are expanded or collapsed?

Basically I'd like the "toggle all" button to result only in a) the title or b) the title and the image.

Thanks in advance for any help!!!!

my html:

<div class="well sidebar-nav" id="sidebar">
    <ul class="nav nav-list">
        <li><a href="#" class="expandcollapse">Toggle All</a>

        </li>
    </ul>
</div>
<div class="accordion" id="accordion1">
    <div class="accordion-group">
        <div class="row-fluid">
           <div class="span9">
                <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
                                    <h2>COOL HAND LUKE</h2>
                    </a>

                </div>
            </div>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
               <div class="mainList"> <a href="#">Paul Newman Movies</a>  <a href="#"> <i class="icon-white icon-th-list"></i></a>

                </div>
            </div>
        </div>
    </div>
</div>

<div id="collapseMain" class="accordion-body collapse in">
    <div class="accordion-inner">
        <div class="row-fluid">
            <div class="span12">
                <img src="http://www.samefacts.com/wp-content/uploads/2012/12/CoolHandLuke_135Pyxurz.jpg" alt="">

            </div>
        </div>
    </div>
</div>

my javascript:

$('.expandcollapse').click(function () {

    $('.collapse').each(function (index) {
        $(this).collapse("toggle");
    });
});

EDIT: So I partially figured it out. jsfiddle: http://jsfiddle.net/mcfly303/XXXYn/4/ I split to button into two separate buttons to clearly label each function I want to achieve.However, there is still a kink. Namely on loading, the FIRST CLICK on the Title View button will toggle the text open and the picture closed. And also on load, the first click on the Title and Image button will toggle the text open and keep the image open.

After the first click, everything works fine, which to clarify (and edit my misstatement above) is: Click on TITLE VIEW - collapses all except the Title. Click on the Title will expand/collapse the text piece Click on TITLE AND IMAGE VIEW - expands to Title and Image. Click on the Title will expand/collapse the text piece

If anyone can please help with this last kink of the "first click problem" I would really appreciate it!

Thanks.

Upvotes: 1

Views: 5916

Answers (1)

ljfranklin
ljfranklin

Reputation: 480

Updated JS:

var isCollapsed = false;
$('.expandcollapse').click(function () {
  var collapseCommand = isCollapsed ? "show" : "hide";

  $('.collapse').each(function () {  
    $(this).collapse(collapseCommand);
  });

  isCollapsed = !isCollapsed;
});

I also added the in class to #collapseOne so the page displays correctly initially.

Edit:

New code based on your edit:

$('.titleView').click(function () {
  $('#collapseOne, #collapseMain').collapse('hide');
});

$('.fullStubView').click(function () {
  $('#collapseOne, #collapseMain').collapse('show');
});

Unless I'm missing something, seems like this solves the problem. jsFiddle

Upvotes: 1

Related Questions