Fade in and out list items while adjusting the height of the container

Question

Fade in and out list items while adjusting the height of the container

Check out this code snippet I put together in Codepen:

<div class="slider">
  <ul>
    <li id="S1">
      <div class="txt"><p>First slogan</p></div>
      <div class="img"><img src="http://placehold.it/800x180" /></div>      
    </li>
    <li id="S2">
      <div class="txt"><p>First slogan</p></div>
      <div class="img"><img src="http://placehold.it/800x280" /></div>
    </li>
  </ul>
  <a href="#S1">1</a>
  <a href="#S2">2</a>
</div>

I want to achieve the following functionality with JQuery:

Initially, only the first LI item should be visible.
When an A tag is clicked and its href value does not match the ID of the visible LI:
- Fade out the current LI;
- Resize the Slider container DIV Height to the height of the LI to be displayed;
- Fade in the LI to be displayed.

Can someone help me implement this with JQuery?

Thanks, Miguel

jquery html css

Answer 1

Answer №1

Here is a swap function that should do the trick:

To begin, add the currentStory class to both the first LI and A tags:

<li id="S1" class="currentStory">

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

It's important for the links to have the same ID as their corresponding <li> items in order for this function to work correctly.

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

<a href="#S2" id="S2">2</a>

$(document).ready(function() {

  function switchStory(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(){
            switchStory($(this).attr("id"));
            return(false);
        });
   });

});

I hope this helps with what you're trying to achieve.

Answer 2

Here is a swap function that should do the trick:

To begin, add the currentStory class to both the first LI and A tags:

<li id="S1" class="currentStory">

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

It's important for the links to have the same ID as their corresponding <li> items in order for this function to work correctly.

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

<a href="#S2" id="S2">2</a>

$(document).ready(function() {

  function switchStory(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(){
            switchStory($(this).attr("id"));
            return(false);
        });
   });

});

I hope this helps with what you're trying to achieve.

Answer 3

Answer №2

Check out this sample I created, simplifying CSS rules with jQuery.

Remember to add your media queries back in.

The jQuery code:

$(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){
           //show hidden linked li
           if($(this).is(':hidden') && id == $(this).attr('id')){
                $(this).fadeIn(500).slideDown("fast");
            }
            //do nothing if already visible
            else if($(this).is(':visible') && id == $(this).attr('id')){
            }
            else{
               $(this).fadeOut(100,function(){$(this).slideUp("fast")});
            }
        });
    });
});

DEMO

Answer 4

Check out this sample I created, simplifying CSS rules with jQuery.

Remember to add your media queries back in.

The jQuery code:

$(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){
           //show hidden linked li
           if($(this).is(':hidden') && id == $(this).attr('id')){
                $(this).fadeIn(500).slideDown("fast");
            }
            //do nothing if already visible
            else if($(this).is(':visible') && id == $(this).attr('id')){
            }
            else{
               $(this).fadeOut(100,function(){$(this).slideUp("fast")});
            }
        });
    });
});

DEMO

Answer 5

Answer №3

If you're facing issues, consider giving the jQueryUI accordion a try.

Here's a helpful link: Accordion

Answer 6

If you're facing issues, consider giving the jQueryUI accordion a try.

Here's a helpful link: Accordion

Fade in and out list items while adjusting the height of the container

Answer №1

Answer №2

Answer №3

Similar questions

Round progress indicator with directional pointer

Restricting the number of lines within a paragraph in Angular 2

Images and videos are not appearing on GithubPages when viewed online, but they are visible

Transform HTML into a PDF document using ABCpdf

series of lines including <ListItemText>

What is the best way to keep horizontal divs aligned in a row with margins between them within a wrapper?

Increment the name field automatically and track the number of auto-increment variables being sent through serialization

Calculate the number of characters in one line inside a contentEditable DIV using Jquery

Created a notification for when the user clicks the back button, but now looking to remove it upon form submission

Identifying the method of navigation using PerformanceNavigationTiming

I am looking to develop a customizable table where the user can input their desired information

Is there a way to display multiple rows in the responsive view of Datatables.net?

Retrieving and storing data between a database and text fields

When converting HTML to PDF using Dompdf, Font Awesome icons may not appear as expected

Manipulating the ng-model linked HTML element's value with jQuery

Adjusting the Bootstrap button block to match the width of the screen

Generate a fresh array from the existing array and extract various properties to form a child object or sub-array

Creating a dropdown menu that seamlessly populates elements without any empty spaces

Tips on effectively integrating the onSelectChange() function with queries in ColdFusion 9 using Ajax

Bootstrap popover fails to function without any visible errors