Changing Bootstrap column class on click, change it back when other element is clicked

Question

This seems quite tricky to me. I want to change a bootstrap column class from "col-md-2" to "col-md-3" when class "panel-titel" within the div is clicked. When the user clicks on another "panel-titel" I want that one's containing "col-md-2" to change to "col-md-3" and the first class change of the other div to be reverted. Is this even possible? Thanks.

<div class="col-md-2">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#timeline1">
          15.3.2014
        </a>
      </h4>
    </div>
    <div id="timeline1" class="panel-collapse collapse">
      <div class="panel-body">
        <a href="#" class="thumbnail">
          <img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb11">
        </a>
      </div>
    </div>
  </div>
</div>

Answer 1

Here's a strategy that might help: listen to the click event on .panel-title, and change the parent class to md-col-3 when it is clicked on, and also revert the classes of all siblings of this parent to md-col-2. Here's the code:

$('.panel-title').click(function() {
    $(this)
        // Find parent with the class that starts with "col-md"
        // Change class to "col-md-3"
        .closest('[class^="col-md"]')
            .removeClass('col-md-2')
            .addClass('col-md-3')

        // Find siblings of parent with similar class criteria
        // - if all siblings are the same, you can use ".siblings()"
        // Change class to "col-md-2"
        .siblings('[class^="col-md"]')
            .removeClass('col-md-3')
            .addClass('col-md-2');
});

Note that if all the siblings of the parents are the same, you can make do without the .siblings('[class^="col-md"]') selector, and use .siblings() instead.

A more simple way to view the code above, without comments. The indentations are useful when chaining in jQuery to keep track of the objects that are currently being manipulated:

$('.panel-title').click(function() {
    $(this)
        .closest('[class^="col-md"]')
            .removeClass('col-md-2').addClass('col-md-3')
            .siblings('[class^="col-md"]')
                .removeClass('col-md-3').addClass('col-md-2');
});

Here is a proof-of-concept fiddle: http://jsfiddle.net/teddyrised/zwpCF/

---

[Update] Even better: if you want to save a few bytes, you can use .toggleClass() instead:

$('.panel-title').click(function() {
    $(this)
        .closest('[class^="col-md"]')
            .toggleClass('col-md-2 col-md-3')
            .siblings('[class^="col-md"]')
                .removeClass('col-md-3')
                .addClass('col-md-2');
});

See fiddle here: http://jsfiddle.net/teddyrised/zwpCF/1/