Function in js that hides and shows independent divs

Question

Function in js that hides and shows independent divs

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

I am 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 does not skip between pages. Each slide is contained in its own div and within them the buttons that lead to other slides.

Howitreacts:whenonthemainslideIclickonthelinkthattakestoslide1themainslideishiddenandslide1goesintoplace(usinghideandshowcss)andsoon,whenonslide1clicktogotoslide1-1slide1ishiddenandslide1-1appears.

IwouldlikeaJavaScriptfunctiontodothis.Ialreadysearchedtheforumbutcouldnotimplementittoworkdirectly.IhavelittleknowledgeinJavaScriptbutIunderstandwelllogic.

ThisisanhtmltestthatI'musing

<html><body><divclass="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

asked by anonymous 16.08.2017 / 21:02

2 answers

1

I'll explain using javascript with Jquery. Following the logic of this example, you can place as many divs (slides) as you want. When calling the ViewSlide function, 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><divid="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>

16.08.2017 / 21:32

help to view multiple line pass to a Controller Clear string in Python (remove escape characters)

score 3 · Accepted Answer

Here is 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><divclass="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>