How can I hide some elements when showing another?

Question

I'm finishing my website and I have a script which is hiding or showing a div when a button is pressed.

Here is code :

function display(id) {
    var e = document.getElementById(id);
    if (e.style.display === "none") {
        e.style.display = "block";
    } else {
        e.style.display = "none";
    }
}

But this code is not truly what I'd like because I only want that one div can be displayed at the same time (ex : if div 4 is active and the user need to see the div 2, it has to hide the first one). I have just used JS for quick things therefore I don't have any idea how to do this.

Also would it be possible to hide a specific div depending from which link the user comes on the page.

Exemple of my html :

<a onclick="display('1_1_1')">button</a>

<div id="1_1_1" class="well" style="display: none;"> 
    <h1>Title</h1>
</div>

Thank you for your help !

There are many solutions for it. So you should add your html code to help others to help you. — Mr Alihoseiny, Jun 27 '18 at 16:44
I can share my html but it's only the same type of div, see my post — Hekmil, Jun 27 '18 at 16:59
A class is a set of like things. You should be using classes in your markup and targeting them with your script rather than dealing with individual element IDs. Take a look at how almost any accordion script works. — isherwood, Jun 27 '18 at 17:05
Possible duplicate of [JavaScript hide/show element](https://stackoverflow.com/questions/6242976/javascript-hide-show-element) — Guillaume Georges, Jun 27 '18 at 17:07

score 1 · Answer 1 · answered Jun 27 '18 at 16:45

It is better to add a class which contains display: none like

.no-display {
  display: none;
}

then just add or remove that class when you click on a div like

parentDiv.addEventListener("click", function() {
  const elem = getElemenyById("elemID");
  if(something) {
    elem.classList.add("no-display");
  else if(something) {
    elem.classList.remove("no-display");
  };
});

Rajat Jain · Answer 2 · 2018-06-27T17:41:36.870

0

You can create a class with display property and you can add it using Jquery.

CSS:

.display_none_class {
    display: none;
}

Jquery:

<script>
$( "#element_ID" ).addClass( "display_none_class" );
</script>

But this sometimes has aligning issues. So, you can use CSS as:

.display_none_class {
    width:0;
    visibility: none;
}

You can implement this by toggle class:

$("#button_ID").click(function(){
    $("#element1_id").toggleClass("display_none_class");
    $("#element2_id").toggleClass("display_none_class");
});

First, add this class to the element which you want to hide first. Then On clicking button, it will toggle the class and will make one element visible and other hide. First add this

edited Jun 27 '18 at 17:41

answered Jun 27 '18 at 17:26

Rajat Jain

1,339
2
16
29

Okay, I get the class concept but how do I apply it to my example ? – Hekmil Jun 27 '18 at 17:33
@RajatJain There is absolutely no benefit in using jQuery for this. [element.classList.add](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) exists in JavaScript. Also, in your example, you're not adding the right class. – Guillaume Georges Jun 27 '18 at 17:40
@GuillaumeGeorgesIt's not benefit thing. Jquery is easy to implement and saves time. – Rajat Jain Jun 27 '18 at 17:43
Okay thank you, I see before how it works. But on some pages I have 20 different div and if I've well understood I have to write this for every div ? (I'm sure there is a faster way but I've not the required knowledge in JS/JQ sorry) – Hekmil Jun 27 '18 at 17:49
For one div yes, but I'd like to to something more generic like this (which doesn't work but it's the idea) : `function toggle(id) { $(id).click(function(){ $(id).toggleClass("display_none_class"); }); };` And then untoggle when another is displayed – Hekmil Jun 27 '18 at 18:27
Sorry, But we can just give you an idea of implementing the thing. This community is not for writing the code. Yes, if you again get some problem, let us know. But first, show your efforts. Search on docs. – Rajat Jain Jun 27 '18 at 18:38
That's what I just did, I just know a few thing in js but it's not a langage that interest me at all. I just want to complete this then don't touch it for a long time – Hekmil Jun 27 '18 at 18:48

How can I hide some elements when showing another?

2 Answers2