CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
loudenw
loudenw

Reputation: 77

Hiding a Div and Showing a New One On Single Click

thanks for looking at this. I've searched for a couple hours and can't find a solution that fits my problem. I have 5 navigation links in a fixed header. Clicking on one link works fine; the links show hidden content. The problem is when trying to go to a second link. The content from the first link does not disappear, and the content from the second link appears below the content from the first link. I need the content from the first link to hide when clicking on a new link. Not sure if it 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>

https://jsfiddle.net/LLd4sfc9/

Upvotes: 4

Views: 128

Answers (6)

Phani Kumar M
Phani Kumar M

Reputation: 4590

You can change your JS to be like below. Basically, the code will add hidden class to all divs with id slide* and excludes the current slide which is clicked, then toggles the class hidden for the slide clicked.

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>

Upvotes: 1

zhuravlyov
zhuravlyov

Reputation: 503

"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>

Just one more example in pure JS

Upvotes: 0

Alex Dacre
Alex Dacre

Reputation: 86

You need to hide all first and then show the one you want. I've used generic jQuery but you could use bootstrap's collapse function instead.

$('.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>

Upvotes: 0

Iyong Budiarso
Iyong Budiarso

Reputation: 1

You can add this code before toggle action.

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

Or you can check this answer JQuery: Toggle Element that is clicked and hide all other

Upvotes: 0

Julio Feferman
Julio Feferman

Reputation: 2676

Complementing the first answer, there are unclosed divs in the html preventing the js from functioning. The snippet below works.

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>

Upvotes: 0

user8106201
user8106201

Reputation:

The problem is that you are not hiding all of the other divs in jquery

1) add a class to each div that needs to be toggled

2) in js, hide all divs with that class

the new html would be:

<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>

and javascript would be

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

Upvotes: 0

Related Questions