Slide Panel Up And Down

I have the following Fiddle Example:

Close

Solution 1:

WORKING FIDDLE

$('#open-map').click(function(){
    $('#map').slideToggle('slow');
});
$('#open-text').click(function(){
    $('#text').slideToggle('slow');
});
$('.close').click(function(){
    $(this).parent().slideUp('slow');
});

Works for map and text both.

Solution 2:

One further approach, which makes it a little more expandable (so long as you associate the <a> elements' href attribute with the id of the targeted element) is:

// binding a click-handler to the <a class="close"> elements:
$('a.close').on('click', function (e) {
    // slide-toggling the closest <div class="panel"> ancestor element,// although slideUp() could be used, since if the element is hidden the// a.close element can't be clicked:
    $(this).closest('.panel').slideToggle();
});

// binding a click handler to the .trigger elements:
$('.trigger').on('click', function () {
    // getting a reference to the clicked-element:var clicked = $(this),
        // forming an array of all the sibling .trigger elements,
        ids = clicked.siblings('.trigger')
                  // adding back the clicked element:
                  .addBack().map(function () {
                      returnthis.getAttribute('href');
                  }).get();
    // finding all the elements associated with those .trigger elements:
    $(ids.join(',')).each(function () {
        // iterating over the collection with each(),// if the href attribute (not property) of the clicked element// contains the string of the id of the current element at// an index of 1:if (clicked.attr('href').indexOf(this.id) === 1) {
            // we slideToggle() the relevant element:
            $(this).slideToggle();
        } else {
            // otherwise we simply close the element:
            $(this).slideUp();
        }
    });
});

$('a.close').on('click', function(e) {
  $(this).closest('.panel').slideToggle();
});

$('.trigger').on('click', function() {
  var clicked = $(this),
    ids = clicked.siblings('.trigger').addBack().map(function() {
      returnthis.getAttribute('href');
    }).get();
  $(ids.join(',')).each(function() {
    if (clicked.attr('href').indexOf(this.id) === 1) {
      $(this).slideToggle();
    } else {
      $(this).slideUp();
    }
  });
});

.panel {
  display: none;
}
.trigger {
  display: block;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="panel"id="map"><ahref="#"class="close">Close</a><imgsrc="http://placehold.it/880x120" /></div><divclass="panel"id="text"><ahref="#"class="close">Close</a>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet, urna id dignissim venenatis, mi metus convallis purus, et tincidunt nunc leo sit amet lectus. Nullam vitae efficitur purus. Nulla facilisi. Praesent mauris massa, ullamcorper ut
  varius vitae, porttitor id augue.</div><divclass="content"><ahref="#map"id="open-map"class="trigger">Open Map</a><ahref="#text"id="open-text"class="trigger">Open Text</a></div>

References:

• JavaScript:
  • Element.getAttribute().
  • String.prototype.indexOf().
• jQuery:
  • addBack().
  • closest().
  • get().
  • map().
  • on().
  • siblings().
  • slideToggle().
  • slideUp().

Solution 3:

$('#close-map').click(function(){
var$helper = $('#map');
$helper.animate({
            height: "toggle"
        }, {
        duration: 200,
        progress: function(){
            $helper.scrollTop( $helper[0].scrollHeight );       
        }
    });
});

just add this block to make close link work , where #close-map is id of close link

Share