Make a jQuery element slide up if another one is clicked

Question

Ok so I am looking for a similar function like I found on this page: http://jsfiddle.net/B6TZS/

I need almost the same thing. With the fact that the slide down is directly under the element that is clicked. The difference is that I need to load certain data from the data- in each element. I would like the data to fade in when the div is sliding down. Also when a different grid element is clicked I would like the animation to be slide up fade out and slide down the new one with a fade in. Here is my code so far. I am getting hung up on how to apply the active class and how to determine how to remove it which is linked to the transition animation.

<div class="container leaderShipwrapper gallery-items">
    <ul id="items" class="row list-unstyled">
        <div class="col-sm-12 col-sm-offset-1 leaderShipgrid">
            <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><img class="image-responsive" src="images/leader.jpg" alt="" /></li>
            <li class="col-sm-2 col-xs-4 leader" data-name="ray" data-title="dunce" data-profile="dunce profile"><img class="image-responsive" src="images/leader.jpg" alt="" /></li>
            <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><img class="image-responsive" src="images/leader.jpg" alt="" /></li>
            <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><img class="image-responsive" src="images/leader.jpg" alt="" /></li>
            <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><img class="image-responsive" src="images/leader.jpg" alt="" /></li>
        </div>
        <div class="col-sm-10 col-sm-offset-1">
            <li id="1" class="leaderDescription"><div class="leaderName"></div><div class="leaderTitle"></div><div class="leaderProfile"></div></li>
        </div>
    </ul>
</div>

<script>
        $('.leaderDescription').hide();
        $('.leader').click(function(){


    if ($(this).hasClass('active')){
      /* hide the next content div*/
      $(this).next('.leaderDescription').slideUp();
      /* and remove the active class*/
      $(this).toggleClass('active');
    } 
    else {
      /* slide the content div down */

      $(this).next('.leaderDescription').slideDown();
      /* and add the active class*/ 
      $(this).addClass('active').slideDown('slow');

    }


    $(this).parent().siblings().find('.leaderDescription').find('.leaderName').text($(this).attr('data-name'));
    $(this).parent().siblings().find('.leaderDescription').find('.leaderTitle').text($(this).attr('data-title'));
    $(this).parent().siblings().find('.leaderDescription').find('.leaderProfile').text($(this).attr('data-profile'));
    $(this).parent().siblings().find('.leaderDescription').slideDown('slow').addclass('active');


    });
</script>

Ok so I think the new issue is with the javascript. Here is a pic of what is happening when I click on the first box in the first row.

Answer 1

Good morning,

I would try something like this:

<script>
    $('.leaderDescription').hide();
    $('.leader').click(function(){

        var descriptionDiv = $(".leaderDescription");

        if ($(this).hasClass('active')){
            // hide the content div
            $(descriptionDiv).slideUp();

            // and remove the active class from the .leader and content div
            $(descriptionDiv).removeClass("active");
            $(this).removeClass('active');
        } 
        else {
            // Remove "active" from all .leader divs
            $(".leader").removeClass("active");

            // Add "active" class to the one just clicked
            $(this).addClass("active");

            // Slide up the content div if it is already open while we are updating data, before re-opening, similar to the JSFiddle you posted
            if ($(descriptionDiv).hasClass("active")) {
                // Remove active class
                $(descriptionDiv).removeClass("active"); 
                var $this = this;
                $(descriptionDiv).slideUp("500", function() {
                    $($this).after(descriptionDiv);
                    // Update our data
                    UpdateData($this);
                    // Re-open it.
                    $(descriptionDiv).slideDown('slow').addClass('active');
                });
            }
            else {
                $(this).after(descriptionDiv);
                // Update our data
                UpdateData(this);
                $(descriptionDiv).slideDown('slow').addClass('active');
            }
        }
     });

    function UpdateData(thisElement) {
        var descriptionDiv = $(".leaderDescription");
        // Update our data
        $(descriptionDiv).find('.leaderName').text($(thisElement).attr('data-name'));
        $(descriptionDiv).find('.leaderTitle').text($(thisElement).attr('data-title'));
        $(descriptionDiv).find('.leaderProfile').text($(thisElement).attr('data-profile'));
    }
</script> 

<style>
    .leaderDescription {
        transition: opacity .5s ease-in-out;
        -moz-transition: opacity .5s ease-in-out;
        -webkit-transition: opacity .5s ease-in-out;

        opacity: 0;
    }

    .leaderDescription.active {
        opacity: 1;
    }
</style>

Based on comments, I have updated this answer and posted it in Bootply: http://www.bootply.com/KsMdBmmOdD

Replacing UL/LIs with divs: http://www.bootply.com/MW55yyE6D7

Made fully responsive:
http://www.bootply.com/Mi2q0SNMZs