Show/Hide Multiple Divs Javascript

后端未结

关注

 4  1584

Looking for a good JavaScript to help me hide/show multiple divs with a button click not an a href click so I can use it in blogger. I\'ve been looking for an answer for a w

相关标签:

4条回答

醉话见心

2020-12-11 06:42

We can easily add an unlimited amount of buttons using reusable code.

here is a full example! Enjoy

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.generalclass {
  width: 100%;
  color: #ffffff;
  text-align: center;
  background-color: #000000;
  margin: 10px;
  padding: 10px;
  display: none;
}

.button{
	background: red;
    padding: 10px;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 16px;
    border: none;   
    
}

.button:hover{
	background: black;    
}

</style>
</head>
<body>

<button class="button" onclick="myFunction('button1')">Button 1</button>

<button class="button" onclick="myFunction('button2')">Button 2</button>



<div id="button1" class="generalclass">
<p>I can show anything here</p>
</div>

<div id="button2" class="generalclass">
<p>I can show anything here too and different from button 1</p>
</div>


<script>
function myFunction(divid) {

  var x = document.getElementById(divid);  
  
  if (x.style.display == "none") 
  {
    x.style.display = "block";
  } 
  else {
    x.style.display = "none";
  }  
}
</script>


</body>
</html>

0 讨论(0)

北恋

2020-12-11 06:49

I found the answer to what I wanted with the .toggle function thanks for the help. The answer I found here: radomsnippets.com

0 讨论(0)
发布评论:

提交评论
- 加载中...

有刺的猬

2020-12-11 06:56

I would suggest to separate your code first - it would be then more clean and reusable - like myStyle.css, myScript.js, index.html

Add the css and js file in the html file like -

<link rel="stylesheet" type="text/css" href="myStyle.css"> <script type="text/javascript" src="myScript.js"></script>

src -> indicates the source path of the file. Here I assume that all our css, js, 'html' file in same place.

 var divs = ["Div1", "Div2", "Div3", "Div4"];
    var visibleDivId = null;
    function divVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }

.buttons a {
  font-size: 16px;
}
.buttons a:hover {
  cursor:pointer; 
  font-size: 16px;
}

<div class="main_div">
<div class="buttons">
<a href="#" onclick="divVisibility('Div1');">Div1</a> | 
<a href="#" onclick="divVisibility('Div2');">Div2</a> | 
<a href="#" onclick="divVisibility('Div3');">Div3</a> | 
<a href="#" onclick="divVisibility('Div4');">Div4</a>
</div>
<div class="inner_div">
<div id="Div1">I'm Div One</div>
<div id="Div2" style="display: none;">I'm Div Two</div>
<div id="Div3" style="display: none;">I'm Div Three</div>
<div id="Div4" style="display: none;">I'm Div Four</div>
</div>
</div>

0 讨论(0)

有刺的猬

2020-12-11 07:05

if you want to hide/show all divs simultaneously than you have to give all divs same class for ex: .toggle and than you can do this:

function myFunction1(){
    $(".toggle").slideToggle();
}

if you want to hide/show one div at a time than you can do this with id :

function myFunction1(){
    $("#myDIV1").slideToggle();
}

with different buttons :

function myFunction1(id){
    $("#"+id).slideToggle();
}

pass id here :

<button onclick="myFunction1('myDIV1')">One</button>
<button onclick="myFunction1('myDIV2')">Two</button>
<button onclick="myFunction1('myDIV3')">Three</button>
<button onclick="myFunction1('myDIV4')">Four</button>

0 讨论(0)