Help to resolve code show & hide div

I ask your help to resolve this code…

What do you need help with? Can you describe the problem you’re having and what you’ve figured out so far?

Thanks for the quick response.
What happens is that the code is not working. But if you remove the 2 divs it already works as in this example: https://jsfiddle.net/cigaai/mx9fvyd2/4/

  1. You aren’t being consistent with your id. In some places you have “section” in others you have “sections”.
  2. If the parent of an element is not displayed, then that child element will not be displayed. You are changing the visibility of a div while its parents are still displayed.

Thank you for your help.
1- already corrected.
2- I can’t understand why this happens after adding two divs to the parent element.
With a 1 child div it works …
Can you help me?

Because those two divs have their display set to none.

Is it possible to indicate the correct code to me with the inclusion of the 2 divs?

You will need to change the display attribute on those divs.

I think it refers to the css code. If I remove all CSS the code still doesn’t work …

I just noticed that you also haven’t imported jQuery.

Removing the CSS and imported jQuery continues the code to not work with the 2 divs.

Look at which divs you’re targeting. Right now, you have this HTML:

<div id="sections">
  <div class="">
    <div class="">
      <div id="content1" class="content1">IMG 1</div>
      <div id="content2" class="content2">IMG 2</div>
      <div id="content3" class="content3">IMG 3</div>
    </div>
  </div>
</div>

And your CSS:

#sections div{
    display:none;
}

This sets every single <div> in #sections to display:none.

  • the outer <div> with class=""
  • the inner <div> with class=""
  • all of the innermost <div>s with class="content...".

You can either remove all those wrapping <div>s with class="", or change the selector so it only hides the innermost ones.

(Same problem with your script, you’re targeting the wrong elements)

1 Like