Have you ever wondered how to alternate multiple divs using the jQuery hide and show methods?. This can often come in useful when different links need to have a hover state that will show different content within the same container. A relevant example would be a home page that shows child page excerpts when you hover over parent headings.

In this post, we demonstrate how to get this working by creating three heading divs that when hovered over reveal and hide each headings child pages within the one container. To enable this to work, the JavaScript library, jQuery will need to be added to the mix.

Images Courtesy of https://placeimg.com/

HTML

The markup below shows the basic structure of this demonstration. To make things easier Bootstrap 4 is being used to help with the layout and create four columns.

 <!-- Child hover pages -->
    <section id="child-pages-section">
        <div class="container">
            <div class="row child-pages-wrapper">
                    <div class="col">
                        <div class="parent-pages">
                            <h2 class="parent active-parent hoverReveal1">HEADING ONE</h2>
                            <h2 class="parent hoverReveal2">HEADING TWO</h2>
                            <h2 class="parent hoverReveal3">HEADING THREE</h2>
                        </div>
                    </div>
                
                <!-- Wrapper 1 -->
                <div class="wrapper1 col-md-9 active-hoverReveal py-4">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card">
                                <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/animals" style="width:100%">
                                <div class="card-body p-0">
                                    <h6 class="card-title pt-1">lorem Ipsum 1</h6>
                                    <p class="card-text pb-1">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod</p>
                                </div>
                            </div>
                        </div>
                    
                        <div class="col-md-4">
                            <div class="card">
                                <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/arch" style="width:100%">
                                <div class="card-body p-0">
                                    <h6 class="card-title pt-1">lorem Ipsum 2</h6>
                                    <p class="card-text pb-1">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel</p>
                                </div>
                            </div>
                        </div>
            
                        <div class="col-md-4 pr-4">
                            <div class="card">
                                <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/nature" style="width:100%">
                                <div class="card-body p-0">
                                    <h6 class="card-title pt-1">lorem Ipsum 3</h6>
                                    <p class="card-text pb-1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod </p>
                                </div>
                            </div>
                        </div>
                    </div>   <!-- end row-->
                </div>

                <!-- Wrapper 2 -->
                <div class="wrapper2 col-md-9 hidden-hoverReveal py-4">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="card">
                                    <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/people" style="width:100%">
                                    <div class="card-body p-0">
                                        <h6 class="card-title pt-1">lorem Ipsum 4</h6>
                                        <p class="card-text pb-1">Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
                                    </div>
                                </div>
                            </div>
                        
                            <div class="col-md-4">
                                <div class="card">
                                    <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/tech" style="width:100%">
                                    <div class="card-body p-0">
                                        <h6 class="card-title pt-1">lorem Ipsum 5</h6>
                                        <p class="card-text pb-1">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod </p>
                                    </div>
                                </div>
                            </div>
                
                            <div class="col-md-4 pr-4">
                                <div class="card">
                                    <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/tech/sepia" style="width:100%">
                                    <div class="card-body p-0">
                                        <h6 class="card-title pt-1">lorem Ipsum 6</h6>
                                        <p class="card-text pb-1">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis </p>
                                    </div>
                                </div>
                            </div>
                        </div>   <!-- end row-->
                    </div>
              
                    <!-- Wrapper 3 -->
                    <div class="wrapper3 col-md-9 hidden-hoverReveal py-4">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="card">
                                        <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/arch" style="width:100%">
                                        <div class="card-body p-0">
                                            <h6 class="card-title pt-1">lorem Ipsum 7</h6>
                                            <p class="card-text pb-1">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
                                        </div>
                                    </div>
                                </div>
                            
                                <div class="col-md-4">
                                    <div class="card">
                                        <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/animals" style="width:100%">
                                        <div class="card-body p-0">
                                            <h6 class="card-title pt-1">lorem Ipsum 8</h6>
                                            <p class="card-text pb-1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore</p>
                                        </div>
                                    </div>
                                </div>
                    
                                <div class="col-md-4 pr-4">
                                    <div class="card">
                                        <img class="card-img-top img-fluid" src="https://placeimg.com/205/101/people/sepia" style="width:100%">
                                        <div class="card-body p-0">
                                            <h6 class="card-title pt-1">lorem Ipsum 9</h6>
                                            <p class="card-text pb-1">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim</p>
                                        </div>
                                    </div>
                                </div>
                            </div>   <!-- end row-->
                   </div>

            </div>
         </div> 
    </section>

 

CSS

Here is basic CSS styling that is targeting the headings and Bootstrap 4 cards used to layout the content.

#child-pages-section .container {
    border: 2px solid lightgrey;
    margin: 20px auto;
    height: 100%;  
}

.hidden-hoverReveal {
    display: none;
}

.active-hoverReveal{
    display: block;
}


#child-pages-section .col {
    background-color: lightgrey;
    color: #993408; 
    padding: 20px 0 0 0px; 
    margin-right: 12px;
    display: inline-block;
}


.parent-pages h2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1rem !important;
    margin: 0 0 30px 0px;
    padding-left: 10px;
}

.card {
    border: none;
}

.card h6 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 15px;
    color: #000;
    font-weight: 700;
}

.card p {
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    color: #333;
    font-weight: 500;
}


.active-parent {
    background: url(https://robdoylecreative.com/wp-content/uploads/2020/02/brown-notch.png) no-repeat right;
    background-size: 4% 100%; /*width and height of the notch image*/
    position: relative; 
    padding-left: 10px;
    color: #fff !important;
    z-index: 1; 
    right: 0;
}

.active-parent::before {
    content: "";
    background-color: #AB5511;
    background-position: left;
    position: absolute;
    display: inline-block;
    left: 0;
    z-index: -1;
    font-size: 1rem; 
    width: 96%; /*width of the css background*/
    height: 100%;
}

Once all the markup and CSS are in place the webpage should look like the image below where content for all divs are showing at once.

show all divs
Images Courtesy of https://placeimg.com/

In order for wrapper one to show on page load for heading one and nothing else, some custom classes need to be added to the HTML for wrappers 1, 2 and 3 that link to the CSS.

<div class="wrapper1 col-md-9 active-hoverReveal py-4">
<div class="wrapper2 col-md-9 hidden-hoverReveal py-4">
<div class="wrapper3 col-md-9 hidden-hoverReveal py-4">
.hidden-hoverReveal {
    display: none;
}

.active-hoverReveal{
    display: block;
}

What this is doing is only showing wrapper one and hiding wrappers two and three on page load. This is done by setting a default active class which in this case is wrapper one. Display: Block will allow is to show. The other wrappers are set to Display: None which will hide them.

jQuery will take over from here by dynamically alternating the content on hover using the hide() and show() methods.

jQuery

Looking back at the HTML headings, classes were added to prepare for the jQuery to work. They were hoverReveal1, hoverReveal2, and hoverReveal3

<div class="parent-pages">
     <h2 class="parent active-parent hoverReveal1">HEADING ONE</h2>
     <h2 class="parent hoverReveal2">HEADING TWO</h2>
     <h2 class="parent hoverReveal3">HEADING THREE</h2>
</div>

The jQuery is hooking onto these classes to show and hide the various wrappers depending on what heading is being hovered on. This example is for wrapper one. It targets the .hoverReveal1 class that then runs the function to show wrapper one but hide wrappers two and three. This code is then replicated two more times to target the other wrappers.

//   Hover reveal for wrapper 1
    $('.hoverReveal1').hover(
      function() {
        $('.wrapper2, .wrapper3').hide();
        $('.wrapper1').show();
      }
    ),

Full jQuery Code

The .parent class is targeted and a function created to allow the heading to keep showing each corresponding wrapper on hover until another hovered heading. This allows for a wrapper to always be showing within the container instead of empty space causing the container to collapse. This is achieved by adding and removing an active class on the headings with .addClass() and .removeClass() methods.

<script>
  // Delayed hover on headings one, two and three. All three wrappers are nested within to alternate in line with the delayed hovers
  $( '.parent' ).hover(
    function() {
      $('.active-parent').removeClass('active-parent');
      $(this).addClass('active-parent');
    },

    //   Hover reveal for wrapper 1
    $('.hoverReveal1').hover(
      function() {
        $('.wrapper2, .wrapper3').hide();
        $('.wrapper1').show();
      }
    ),

    //   Hover reveal for wrapper 2
    $('.hoverReveal2').hover(
      function() {
        $('.wrapper1, .wrapper3').hide();
        $('.wrapper2').show();
      }
    ),

    //   Hover reveal for wrapper 3
    $('.hoverReveal3').hover(
      function() {
        $('.wrapper1, .wrapper2').hide();
        $('.wrapper3').show();
      }
    )
  );
</script>

Working Example

Here is a fully working Codepen example showing everything in action

See the Pen jQuery Hide() and Show() by Rob Doyle (@RobertMDoyle) on CodePen.

Conclusion

In this post, we learned how to alternate multiple divs using the jQuery hide and show methods. Some extra CSS classes were also used to reach the desired effect. As you can see this technique can come in very useful in making content more dynamic on a web page as well as operating within a condensed area of space that may come in useful especially when keeping content above the fold.