Hiding Div and showing new on one click

Thanks for looking at this. I searched for a couple of hours and cannot find a solution that matches my problem. I have 5 navigation links in a fixed header. Clicking on one link works great; links show hidden content. The problem is trying to go to the second link. The content of the first link does not disappear, and the content from the second link is displayed below the content from the first link. I need the contents of the first link to be hidden when I click on the new link. Not sure if that matters, but I'm using bootstrap. Here is my code:

 function toggler(divId) {
    $("#" + divId).toggle();
    }
<div class="row">
            <div class="col">
                <a href="#" onclick="toggler('slide1');">slide 1</a>
            </div>
            <div class="col">
                <a href="#" onclick="toggler('slide2');">slide 2</a>
            </div>
            <div class="col">
                <a href="#" onclick="toggler('slide3');">slide 3</a>
            </div>
            <div class="col">
                <a href="#" onclick="toggler('slide4');">slide 4</a>
            </div>
            <div class="col">
                <a href="#" onclick="toggler('slide5');">slide 5</a>
            </div>
    </div>

    <div class="container">
            <div id="slide1" class='hidden'>
            <div class="row">
            <div class="col">
                <img src="img.jpg">
            </div>
            <div class="col"> 
                <img src="img.jpg">
            </div>
            </div>
            </div

            <div id="slide2" class='hidden'>
            <div class="row">
            <div class="col">
                <img src="img.jpg">
            </div>
            <div class="col"> 
                <img src="img.jpg">
            </div>
            </div>
            </div>

            <div id="slide3" class='hidden'>
            <div class="row">
            <div class="col">
                <img src="img.jpg">
            </div>
            <div class="col"> 
                <img src="img.jpg">
            </div>
            </div>
            </div>
        
            <div id="slide4" class='hidden'>
            <div class="row">
            <div class="col">
                <img src="img.jpg">
            </div>
            <div class="col"> 
                <img src="img.jpg">
            </div>
            </div>
            </div>

            <div id="slide5" class='hidden'>
            <div class="row">
            <div class="col">
                <img src="img.jpg">
            </div>
            <div class="col"> 
                <img src="img.jpg">
            </div>
            </div>
            </div>
    </div>


   
Run code

https://jsfiddle.net/LLd4sfc9/

+4
source share
6 answers

JS , . , hidden divs id slide* slide, , hidden .

function toggler(divId) {
  $("[id*='slide']").not($("#" + divId)).addClass("hidden");
  $("#" + divId).toggleClass("hidden");
}

function toggler(divId) {
  $("[id*='slide']").not($("#" + divId)).addClass("hidden");
  $("#" + divId).toggleClass("hidden");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">
      <a href="#" onclick="toggler('slide1');">slide 1</a>
    </div>
    <div class="col">
      <a href="#" onclick="toggler('slide2');">slide 2</a>
    </div>
    <div class="col">
      <a href="#" onclick="toggler('slide3');">slide 3</a>
    </div>
    <div class="col">
      <a href="#" onclick="toggler('slide4');">slide 4</a>
    </div>
    <div class="col">
      <a href="#" onclick="toggler('slide5');">slide 5</a>
    </div>
  </div>
</div>

<div class="container">
  <div id="slide1" class='hidden'>
    <div class="row">
      <div class="col"> 111
        <img src="img.jpg">
      </div>
      <div class="col">111
        <img src="img.jpg">
      </div>
    </div>
  </div>

  <div id="slide2" class='hidden'>
    <div class="row">
      <div class="col"> 222
        <img src="img.jpg">
      </div>
      <div class="col"> 222
        <img src="img.jpg">
      </div>
    </div>
  </div>

  <div id="slide3" class='hidden'>
    <div class="row">
      <div class="col"> 333
        <img src="img.jpg">
      </div>
      <div class="col"> 333
        <img src="img.jpg">
      </div>
    </div>
  </div>

  <div id="slide4" class='hidden'>
    <div class="row">
      <div class="col"> 444
        <img src="img.jpg">
      </div>
      <div class="col"> 444
        <img src="img.jpg">
      </div>
    </div>
  </div>

  <div id="slide5" class='hidden'>
    <div class="row">
      <div class="col"> 555
        <img src="img.jpg">
      </div>
      <div class="col"> 555
        <img src="img.jpg">
      </div>
    </div>
  </div>
</div>
+1

, div jquery

1) div,

2) js, div

html :

<div class="row">
        <div class="col">
            <a href="#" onclick="toggler('slide1');">slide 1</a>
        </div>
        <div class="col">
            <a href="#" onclick="toggler('slide2');">slide 2</a>
        </div>
        <div class="col">
            <a href="#" onclick="toggler('slide3');">slide 3</a>
        </div>
        <div class="col">
            <a href="#" onclick="toggler('slide4');">slide 4</a>
        </div>
        <div class="col">
            <a href="#" onclick="toggler('slide5');">slide 5</a>
        </div>
</div>

<div class="container">
        <div id="slide1" class='hidden slide'>
        <div class="row">
        <div class="col">
            <img src="img.jpg">
        </div>
        <div class="col"> 
            <img src="img.jpg">
        </div>
        </div>
        </div

        <div id="slide2" class='hidden slide'>
        <div class="row">
        <div class="col">
            <img src="img.jpg">
        </div>
        <div class="col"> 
            <img src="img.jpg">
        </div>
        </div>
        </div>

        <div id="slide3" class='hidden slide'>
        <div class="row">
        <div class="col">
            <img src="img.jpg">
        </div>
        <div class="col"> 
            <img src="img.jpg">
        </div>
        </div>
        </div>

        <div id="slide4" class='hidden slide'>
        <div class="row">
        <div class="col">
            <img src="img.jpg">
        </div>
        <div class="col"> 
            <img src="img.jpg">
        </div>
        </div>
        </div>

        <div id="slide5" class='hidden slide'>
        <div class="row">
        <div class="col">
            <img src="img.jpg">
        </div>
        <div class="col"> 
            <img src="img.jpg">
        </div>
        </div>
        </div>
</div>

javascript

function toggler(divId) {
  // hide all other divs first
  $('.slide').hide();
  $("#" + divId).toggle();
}
0

, html divs, js. .

function toggler(divId) {
  $(".slide").hide();
  $("#" + divId).show();
}
img {
  width: 20px;
  height: 20px;
  border: 1px solid black;
}

.slide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col">
    <a href="#" onclick="toggler('slide1');">slide 1</a>
  </div>
  <div class="col">
    <a href="#" onclick="toggler('slide2');">slide 2</a>
  </div>
  <div class="col">
    <a href="#" onclick="toggler('slide3');">slide 3</a>
  </div>
  <div class="col">
    <a href="#" onclick="toggler('slide4');">slide 4</a>
  </div>
  <div class="col">
    <a href="#" onclick="toggler('slide5');">slide 5</a>
  </div>
</div>

<div class="container">

  <div id="slide1" class='slide'>
    <div class="row">
      <div class="col">
        1<img src="img.jpg">
      </div>
      <div class="col">
        <img src="img.jpg">
      </div>
    </div>
  </div>

  <div id="slide2" class='slide'>
    <div class="row">
      <div class="col">
        2<img src="img.jpg">
      </div>
      <div class="col">
        <img src="img.jpg">
      </div>
    </div>
  </div>

  <div id="slide3" class='slide'>
    <div class="row">
      <div class="col">
        3<img src="img.jpg">
      </div>
      <div class="col">
        <img src="img.jpg">
      </div>
    </div>
  </div>

  <div id="slide4" class='slide'>
    <div class="row">
      <div class="col">
        4<img src="img.jpg">
      </div>
      <div class="col">
        <img src="img.jpg">
      </div>
    </div>
  </div>

  <div id="slide5" class='slide'>
    <div class="row">
      <div class="col">
        5<img src="img.jpg">
      </div>
      <div class="col">
        <img src="img.jpg">
      </div>
    </div>
  </div>

</div>
0

, .

    $('[id^="slide"]').hide();

JQuery: ,

0

"use strict";

let menu = document.querySelector('.row');
let menuItems = document.querySelector('.container');
let sliders = menuItems.querySelectorAll('div.hidden');

menu.addEventListener('click', showMenu);

function showMenu(event) {
    event.preventDefault();

    let target = event.target;

    if (target.tagName !== 'A') {
        return;
    }

    let slide = target.getAttribute('data-slide');
    let slideId = '#' + slide;
    let currentSlider = menuItems.querySelector(slideId);
    let currentClass = currentSlider.className;


    for (let i = 0, max = sliders.length; i < max; i++) {
        sliders[i].className = 'hidden';
    }
    
    if (!currentClass) {
        currentSlider.className = 'hidden';
        return;
    }

    currentSlider.className = '';
}
.hidden {
  display: none;
}
<div class="row">
    <div class="col">
        <a href="#" data-slide="slide1">slide 1</a>
    </div>
    <div class="col">
        <a href="#" data-slide="slide2">slide 2</a>
    </div>
    <div class="col">
        <a href="#" data-slide="slide3">slide 3</a>
    </div>
    <div class="col">
        <a href="#" data-slide="slide4">slide 4</a>
    </div>
    <div class="col">
        <a href="#" data-slide="slide5">slide 5</a>
    </div>
</div>

<div class="container">
    <div id="slide1" class='hidden'>
        <div class="row">
            <div class="col">
                111
            </div>
            <div class="col">
                111
            </div>
        </div>
    </div>

    <div id="slide2" class='hidden'>
        <div class="row">
            <div class="col">
                222
            </div>
            <div class="col">
                222
            </div>
        </div>
    </div>

    <div id="slide3" class='hidden'>
        <div class="row">
            <div class="col">
                333
            </div>
            <div class="col">
                333
            </div>
        </div>
    </div>

    <div id="slide4" class='hidden'>
        <div class="row">
            <div class="col">
                444
            </div>
            <div class="col">
                444
            </div>
        </div>
    </div>

    <div id="slide5" class='hidden'>
        <div class="row">
            <div class="col">
                555
            </div>
            <div class="col">
                555
            </div>
        </div>
    </div>
</div>

JS

0
source

First you need to hide everything, and then show the one you want. I used generic jQuery, but instead you could use the bootstrap collapse function.

$('.slide-toggle').click(function() {
  var $this = $(this)
  $('.slide').hide().filter(function() { return $(this).data('slide') === $this.data('toggle') }).show()
})
.slide {
  padding: 10px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="slide-toggle" data-toggle="1">Show Slide 1</button>

<button class="slide-toggle" data-toggle="2">Show Slide 2</button>

<button class="slide-toggle" data-toggle="3">Show Slide 3</button>

<div class="slide" data-slide="1">Slide 1</div>

<div class="slide" data-slide="2">Slide 2</div>

<div class="slide" data-slide="3">Slide 3</div>
Run code
0
source

Source: https://habr.com/ru/post/1686606/


All Articles