CODEWITHSUNDEEP
javascripthtmlcss
Hekmil
Hekmil

Reputation: 39

How can I hide some elements when showing another?

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 !

Upvotes: 1

Views: 1069

Answers (2)

Rajat Jain
Rajat Jain

Reputation: 1415

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

Upvotes: 0

Rumba
Rumba

Reputation: 181

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

Upvotes: 1

Related Questions