css - Show three divs when clicking on on button using jquery

Question

I have seven names, and I want to only show three presentations when I click on a name, with the selected name in the middle. As it is now, all divs loads first and then hide.

When I click the first name, the three divs shows. But when I click button four, and then go back to the first name, it's only showing two divs.

I haven't done any coding so far on the other names, I thought that if I can get the first name/button to work I can figure out the rest.

It's a wordpress site and I use Divi to build my pages.

I have in on this page: http://demo.konstuppsala.online/est/

My code so far:

jQuery(document).ready(function() {
    // Hide the div 1
    jQuery('#reveal1').hide();
    
    jQuery('.rv_button1').click(function(e) {
        e.preventDefault();
        jQuery("#reveal1").slideToggle();
        jQuery('.rv_button1').toggleClass('opened closed');
        
        e.preventDefault();
        jQuery("#reveal2").slideToggle();
        jQuery('.rv_button2').toggleClass('opened closed');
        
        e.preventDefault();
        jQuery("#reveal6").slideToggle();
        jQuery('.rv_button6').toggleClass('opened closed');
        
        jQuery("#reveal1").animate({left: '500px'});
        jQuery('#reveal2').show();
        jQuery("#reveal2").animate({left: '50px'});
        jQuery('#reveal3').hide();
        jQuery('#reveal4').hide();
        jQuery('#reveal5').hide();
        jQuery('#reveal6').show();
        jQuery("#reveal6").animate({right: '50px'});    
    });
});

the HTML:
<div id="reveal1">
<div class="et_pb_blurb_content">
<div class="et_pb_blurb_container">
  <h4 class="et_pb_module_header"><span>Anna-Karin</span></h4>
  <div class="et_pb_blurb_description"><p>Test med att visa/d?lja en blurb<br /><img loading="lazy" class="wp-image-97 alignnone size-thumbnail" src="http://media.demo.konstuppsala.online/2020/12/katter_-10-150x150.jpg" alt="" width="150" height="150" /></p>
<h4><strong>1</strong></h4></div>
</div>
</div> 
</div> 
</div> 

<div id="reveal2">
<div class="et_pb_blurb_content">
<div class="et_pb_blurb_container">
  <h4 class="et_pb_module_header"><span>Anna-Karin</span></h4>
  <div class="et_pb_blurb_description"><p>Test med att visa/d?lja en blurb<br /><img loading="lazy" class="wp-image-97 alignnone size-thumbnail" src="http://media.demo.konstuppsala.online/2020/12/katter_-10-150x150.jpg" alt="" width="150" height="150" /></p>
<h4><strong>1</strong></h4></div>
</div>
</div> 
</div> 
</div> 

<div id="reveal3">
<div class="et_pb_blurb_content">
<div class="et_pb_blurb_container">
  <h4 class="et_pb_module_header"><span>Anna-Karin</span></h4>
  <div class="et_pb_blurb_description"><p>Test med att visa/d?lja en blurb<br /><img loading="lazy" class="wp-image-97 alignnone size-thumbnail" src="http://media.demo.konstuppsala.online/2020/12/katter_-10-150x150.jpg" alt="" width="150" height="150" /></p>
<h4><strong>1</strong></h4></div>
</div>
</div> 
</div> 
</div> 

Does this help? The problem is that I followed a tutorial so I don't have a pure mockup to show.

Answer 1

I recreated the desired behavior using a simpler markup for simplicity here. The JS snippet is this:

const reset = () => {
  $(".options").children().hide();
};

const showSelected = e => {
  const n = Number(e.target.getAttribute("data-n")) + 1;
  $(`.option:nth-child(${n - 1})`).show();
  $(`.option:nth-child(${n})`).show();
  $(`.option:nth-child(${n + 1})`).show();
};

const showOption = e => {
  reset();
  showSelected(e);
};

const main = () => {
  $(".button").click(e => showOption(e));
};

$(document).ready(main());

Notice that:

• Instead of using JS to hide the initial elements, you can simply apply display: none; to the class that you assigned to the boxes.
• Instead of listening to a click event triggered by a specific button, you can just listen to the click event coming from any of the buttons in the header, and then use the event target plus a custom data-n attribute to determine which box is actually being selected.
• I cheated a little bit adding extra boxes at both ends. Another approach would be to rearrage the boxes dynamically.

Syntax Notes

• I used arrow functions instead of the function keyword, and $ instead of jQuery because of a matter of taste. The code should work if you use the alternative style.