All geek questions in one place

Manage multiple show / hide divs

I have several scripts that show and hide divs when clicked. Now I only need to show only one div at a time. I have a code that controls them all, but does not work. I do not know about most javascript.

This is the first example of the show / hide function, which can run simultaneously without hiding another divs.

FIDDLE HERE

HTML:

<a href="javascript:ReverseDisplay('uniquename')">
Click to show/hide.
</a>

<div id="uniquename" style="display:none;">
<p>Content goes here.</p>
</div>



<a href="javascript:ReverseDisplay('uniquename1')">
Click to show/hide.
</a>

<div id="uniquename1" style="display:none;">
<p>Content goes here.</p>
</div>

SCRIPT:

function HideContent(d) {
    document.getElementById(d).style.display = "none";
}

function ShowContent(d) {
    document.getElementById(d).style.display = "block";
}

function ReverseDisplay(d) {
    if (document.getElementById(d).style.display == "none") {
        document.getElementById(d).style.display = "block";
    } else {
        document.getElementById(d).style.display = "none";
    }
}

function HideAllShowOne(d) {
// Between the quotation marks, list the id values of each div.

var IDvaluesOfEachDiv = "idone idtwo uniquename1 uniquename";

//-------------------------------------------------------------
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," ");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/  +/g," ");
var IDlist = IDvaluesOfEachDiv.split(" ");
for(var i=0; i<IDlist.length; i++) { HideContent(IDlist[i]); }
ShowContent(d);
}

Another fiddle I created will do what I need, but the script does not seem to work. Feed here

Found a solution for my code thanks to @Abhas Tandon

The fiddle here is an extra identifier inside IDvaluesOfEachDiv, it seems to cause some error with the codes.

+4
3

IE10 +,

function ReverseDisplay(d) {
  var els = document.querySelectorAll('.toggle.active:not(#' + d + ')');
  for (var i = 0; i < els.length; i++) {
    els[i].classList.remove('active');
  }
  document.getElementById(d).classList.toggle('active')

}
.toggle {
  display: none;
}
.toggle.active {
  display: block;
}
<a href="javascript:ReverseDisplay('uniquename')">
    Click to show/hide.
</a>
<div id="uniquename" class="toggle">
  <p>Content goes here.</p>
</div>

<a href="javascript:ReverseDisplay('uniquename1')">
    Click to show/hide.
</a>
<div id="uniquename1" class="toggle">
  <p>Content goes here.</p>
</div>
Hide result
+3

jQuery, .

thiswithin

<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>

HTML

<div id="id_one">Item 1</div>
<div id="content_one">
    content goes here
</div>

<div id="id_two">Item 1</div>
<div id="content_two">
    content goes here
</div>

Script:

$(function()
{
    $("#content_one").hide();
    $("#content_two").hide();
});

$("#id_one").on("click",function()
{
    $("#content_one").slideDown("fast");
});

$("#id_two").on("click",function()
{
    $("#content_two").slideDown("fast");
});
0

If you have a “Button” for each DIV inside your HTML code, you can go through the index element

var btn = document.querySelectorAll(".btn");
var div = document.querySelectorAll(".ele");

function toggleDivs() {
  for(var i=0; i<btn.length; i++) {
    var us = i===[].slice.call(btn).indexOf(this);
    btn[i].tog = us ? this.tog^=1 : 0;
    div[i].style.display = ["none","block"][us?[this.tog]:0];
  }
}

for(var i=0; i<btn.length; i++) btn[i].addEventListener("click", toggleDivs);
.btn{/* Anchors Buttons */ display:block; cursor:pointer; color:#00f;}
.ele{/* Hidden Divs */     display:none;}
<a class="btn"> 1Click to show/hide.</a>
<div class="ele"><p>1Content goes here.</p></div>
<hr>
<a class="btn">2Click to show/hide.</a>
<div class="ele"><p>2Content goes here.</p></div>
<hr>
Run codeHide result
0
source

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

More articles:


All Articles