Hiding a Div and Showing a New One On Single Click

Question

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();
    }

https://jsfiddle.net/LLd4sfc9/

user_8465023 · Answer

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");
}

Admin · Answer

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:

and javascript would be

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

user_3313922 · Answer

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

user_1811296 · Answer

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

user_8587898 · Answer

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

Just one more example in pure JS

user_5283066 · Answer

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








Slide 1

Slide 2

Slide 3

Hiding a Div and Showing a New One On Single Click

6 Answers