js function to hide and show independent Ivs

Asked

Viewed 53 times

1

I’m putting together a quiz where each click takes the user to a part of the quiz. Everything is loaded on the same page so it doesn’t jump between pages. Each slide is contained in its own div and inside them the buttons that lead to other slides.

inserir a descrição da imagem aqui

How does it react: when in the main slide i click on the link that leads to the slide1 o main slide is hidden and slide1 goes into place (using Hide and show css) and so on, when in slide1 click to go pro slide1-1 the slide1 is hidden and the slide1-1 appears.

I would like a Javascript function to do this. I have searched the forum but could not implement it to work directly. I have little knowledge in Javascript but I understand well logic.

This is a test html I’m using

<html>
<body>
    <div class="main">MAIN
      <a href="#">slide1</a>
      <a href="#">slide2</a>
    </div>
    <!-- second layer -->
    <div class="slide1>SLIDE1
      <a href="#">slide1-1</a>
      <a href="#">slide1-2</a>
    </div>
    <div class="slide2">SLIDE2
      <a href="#">slide2-1</a>
      <a href="#">slide2-2</a>
    </div>
    <!-- third layer -->
    <div class="slide1-1">SLIDE1-1</div>
    <div class="slide1-2">SLIDE1-2</div>
    <div class="slide2-1">SLIDE2-1</div>
    <div class="slide2-2">SLIDE2-2</div>
</body>
</html>
javascript html css

2 answers

3


Follows a solution with generic function and jQuery:

$('[data-target]').on('click', function(e) {
  
  // Evitar o click padrão do botão (href)
  e.preventDefault();
  
  // Esconde todos slides visíveis
  $('.slide:visible').hide();
  
  // Exibe o slide configurado no data-target
  $($(this).data('target')).show();
  
});
.slide {
  background: #fff;
  display: none;
  left: 0;
  height: 100%;
  padding: 30px;
  position: absolute;
  top: 0;
  width: 100%;
}
.main {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
    <div class="slide main">MAIN
      <a href="#" data-target=".slide1">slide1</a>
      <a href="#" data-target=".slide2">slide2</a>
    </div>
    <!-- second layer -->
    <div class="slide slide1">SLIDE1
      <a href="#" data-target=".slide1-1">slide1-1</a>
      <a href="#" data-target=".slide1-2">slide1-2</a>
      <a href="#" data-target=".main">voltar</a>
    </div>
    <div class="slide slide2">SLIDE2
      <a href="#" data-target=".slide2-1">slide2-1</a>
      <a href="#" data-target=".slide2-2">slide2-2</a>
      <a href="#" data-target=".main">voltar</a>
    </div>
    <!-- third layer -->
    <div class="slide slide1-1">SLIDE1-1
      <a href="#" data-target=".slide1">voltar</a>
    </div>
    <div class="slide slide1-2">SLIDE1-2
      <a href="#" data-target=".slide1">voltar</a>
    </div>
    <div class="slide slide2-1">SLIDE2-1
      <a href="#" data-target=".slide2">voltar</a>
    </div>
    <div class="slide slide2-2">SLIDE2-2
      <a href="#" data-target=".slide2">voltar</a>
    </div>
</body>
</html>

  • Diego is exactly that ! Thank you for the time devoted to the answer

  • I liked your script. It’s more complex, but it’s easy to change. I tried to answer more simply.

  • @Rafaelmarcos In this case, I like to keep JS and HTML well separated, I like this type of organization better. Compared to your code the logic was the same, adds the onclick event, hides all by one class and searches for a selector. :)

1

I’ll explain using javascript with Jquery. By following the logic of this example, you can place any Divs(slides) you want. When calling Function Exibirslide, you must pass the target slide ID:

        function ExibirSlide(id)
        {
            $(".slide").hide(); // Esconde todos os slides
            $('#' + id).show(); // Exibe o slide alvo
        }    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <body>
        <div id="divSlideMain" class="slide">MAIN
          <a href="#" onclick="ExibirSlide('divSlide1')">slide1</a>
          <a href="#" onclick="ExibirSlide('divSlide2')">slide2</a>
        </div>
        <!-- second layer -->
        <div id="divSlide1" class="slide" style="display:none;">SLIDE1
          <a href="#" onclick="ExibirSlide('divSlide1')">slide1</a>
          <a href="#" onclick="ExibirSlide('divSlideMain')">slide Main</a>
          <a href="#" onclick="ExibirSlide('divSlide2')">slide2</a>
        </div>
        <div id="divSlide2" class="slide" style="display:none;">SLIDE2
          <a href="#" onclick="ExibirSlide('divSlideMain')">slide Main</a>
          <a href="#" onclick="ExibirSlide('divSlide1')">slide1</a>
          <a href="#" onclick="ExibirSlide('divSlide2')">slide2</a>
        </div>
    </body>
    </html>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.