Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Jquery

Fade In / Out Li And Resize Container's Height

Post a Comment
I have the following markup (I created an example in Code Pen):

  • First slogan<

    Solution 1:

    I believe this swap function should do the trick

    First add the currentStory class to the first LI and A tags <li id="S1" class="currentStory"><a href="#S1" class="currentStory" id="S1">1</a>

    Make sure the links have the same ID as their <li> items for this to work

    <a href="#S1" class="currentStory" id="S1">1</a><a href="#S2" id="S2">2</a>

    $(document).ready(function() {

  functionswapStory(storyName){
$('.slider li.currentStory').hide();
$('.slider li.currentStory').removeClass('currentStory');
$('.slider [id = ' + storyName + ']').addClass('currentStory');
$('.slider [id = ' + storyName + ']').fadeIn("slow");
  }

  $(function() {

     $('.slider li:not(".currentStory")').hide();
        $('.slider a').click(function(){
            swapStory($(this).attr("id"));
            return(false);
        });
   });

});

    Hope this is what you are looking for.

    Solution 2:

    Here is an Example that i made, i cut out all the css rules and made them simple with jquery.

    of course you'll need to put your media-queries back in it.

    the Jquery-

    $(document).ready(function(){
    $('a').click(function(e){
       var id = $(this).attr('href').split("#").pop();
       var li = $('.slider ul li');
       $('.slider ul li').each(function(key,v){
           //if  linked to li is hidden show itif($(this).is(':hidden') && id == $(this).attr('id')){
                $(this).fadeIn(500).slideDown("fast");
            }
            //if it's alrready visible do nothingelseif($(this).is(':visible') && id == $(this).attr('id')){
            }
            else{
               $(this).fadeOut(100,function(){$(this).slideUp("fast")});
            }
        });
    });
});

    DEMO

    Solution 3:

    maybe using the jQueryUI accordion will solve your problem.

    Check this : Accordion

You may like these posts

Post a Comment for "Fade In / Out Li And Resize Container's Height"