wordpress - Javascript, OpenClose function - Stack Overflow

admin管理员组

文章数量:1425819

I'm very new to using Javascript and i'm struggling how I can achieve what I am after. I've created 4 buttons using;

<input type="button" name="answer" value="Brave" onclick="showDiv()">

My goal is that if you click on the button, it changes state and the div appears (got that far). If I click another button, i'd like the content to hide the previous div selected and show the one they had just clicked.

Any help/guidance would really be appreciated.

function showDiv() {
document.getElementById('BraveDiv').style.display = "block";
}
function showDiv1() {
document.getElementById('DeterminedDiv').style.display = "block";
}
function showDiv2() {
document.getElementById('CompassionateDiv').style.display = "block";
}
function showDiv3() {
document.getElementById('ConsiderateDiv').style.display = "block";
}

My aim is that if you was to click

I'm very new to using Javascript and i'm struggling how I can achieve what I am after. I've created 4 buttons using;

<input type="button" name="answer" value="Brave" onclick="showDiv()">

My goal is that if you click on the button, it changes state and the div appears (got that far). If I click another button, i'd like the content to hide the previous div selected and show the one they had just clicked.

Any help/guidance would really be appreciated.

function showDiv() {
document.getElementById('BraveDiv').style.display = "block";
}
function showDiv1() {
document.getElementById('DeterminedDiv').style.display = "block";
}
function showDiv2() {
document.getElementById('CompassionateDiv').style.display = "block";
}
function showDiv3() {
document.getElementById('ConsiderateDiv').style.display = "block";
}

My aim is that if you was to click

• javascript
• wordpress
• button

Share Improve this question Follow edited Nov 19, 2018 at 14:22 peeebeee 2,61866 gold badges2323 silver badges2727 bronze badges asked Nov 19, 2018 at 13:42 Anthony Cdf WhitefieldAnthony Cdf Whitefield 5322 silver badges77 bronze badges 1

• are you looking for accordion – Negi Rox Commented Nov 19, 2018 at 13:45

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

function showDiv() 
{
    document.getElementById('new1').style.display = "block";
    document.getElementById('Div1').style.display = "none";
    document.getElementById('Div2').style.display = "none";
}
function showDiv1() 
{
    document.getElementById('Div1').style.display = "block";
    document.getElementById('new1').style.display = "none";
    document.getElementById('Div2').style.display = "none";
}
function showDiv2() 
{
    document.getElementById('Div2').style.display = "block";
    document.getElementById('new1').style.display = "none";
    document.getElementById('Div1').style.display = "none";
}

Your code attached won't achieve any of the results you're looking for, however, it's obvious what you're looking for.

You buttons should look like the following :

<button role="button" onclick="showDiv('BraveDiv')">Brave</button>

Here, the role prevents the default behaviour of submit. The onclick tells the button what to do when you click it, and the "BraveDiv" is the parameter we will pass to the function, telling it which div to display.

The DIV associated with the above button, should look as follows :

<div id="BraveDiv" style="display: none;"> SOME CONTENT HERE </div>

Here you'll notice the ID is equal to the parameter we mentioned above.

And your JavaScript should work as follows :

<script>

function showDiv(elem){
document.getElementById(elem).style.display = "block";      

}

</script>

I've attached a working snipped example as below, just click "Run code snippet" to view the snippet and test the code.

function showDiv(elem) {
  document.getElementById(elem).style.display = "block";
}

<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
<button role="button" onclick="showDiv('CompassionateDiv')">Compassionate</button>


<div id="BraveDiv" style="display: none;"> SOME BRAVE CONTENT HERE </div>
<div id="CompassionateDiv" style="display: none;"> SOME COMPASSIONATE CONTENT HERE </div>

The above, however, will only SHOW YOUR DIVS.

The full jQuery solution to this (hide/show as per the tag) would be :

<script>   

    function showDiv(elem) { // When the button is pressed
    $("div").each(function() { // For each Div
        if ($(this).attr('id') != elem) { // If the Div's id is not equal to the parameter
          $(this).css("display", "none");
        } // HIDE IT
        else {
          $(this).css("display", "block"); // SHow It
        });

</script>

If you are unfamiliar with jQuery and would prefer a JavaScript only solution, then :

<script>

function showDiv(elem){

var divsToCheck = ["BraveDiv", "CompassionateDiv"]; // Add to here to check more divs
for(let i = 0; i < divsToCheck.length; i++){
if(divsToCheck[i] == elem){
document.getElementById(divsToCheck[i]).style.display = "block";
    }

else{
document.getElementById(divsToCheck[i]).style.display = "none";
    }

}
</script>

Again I've attached a snippet below.

function showDiv(elem) {

  var divsToCheck = ["BraveDiv", "CompassionateDiv"]; // Add to here to check more divs
  for (var i = 0; i < divsToCheck.length; i++) {
    if (divsToCheck[i] == elem) {
      document.getElementById(divsToCheck[i]).style.display = "block";
    } else {
      document.getElementById(divsToCheck[i]).style.display = "none";
    }

  }

}

<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
<button role="button" onclick="showDiv('CompassionateDiv')">Compassionate</button>


<div id="BraveDiv" style="display: none;"> SOME BRAVE CONTENT HERE </div>
<div id="CompassionateDiv" style="display: none;"> SOME COMPASSIONATE CONTENT HERE </div>

function showDiv() {
document.getElementById('BraveDiv').style.display = "block";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv1() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "block";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv2() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "block";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv3() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "block";
}

This might not be the sleekest way of doing it, but will get you the results you want. As each button is pressed, all others will close.

You just need to set the display style of the remaining <div>s back to none. The simplest way to do this is to first set all of them to none, then the one you want visible to block:

Note: I’ve used a function which takes the id of the target <div> as a parameter to reduce the amount of code written, but you could easily copy-paste out to separate functions if you require.

function showDiv(divName) {
  // First hide all the divs
  document.getElementById('BraveDiv').style.display = 'none';
  document.getElementById('DeterminedDiv').style.display = 'none';
  document.getElementById('CompassionateDiv').style.display = 'none';
  document.getElementById('ConsiderateDiv').style.display = 'none';
  
  // Then show the div corresponding to the button clicked
  document.getElementById(divName).style.display = 'block';
}

<input type="button" value="Brave" onclick="showDiv('BraveDiv')">
<input type="button" value="Determined" onclick="showDiv('DeterminedDiv')">
<input type="button" value="Compassionate" onclick="showDiv('CompassionateDiv')">
<input type="button" value="Considerate" onclick="showDiv('ConsiderateDiv')">

<div id="BraveDiv" style="display: none">BraveDiv</div>
<div id="DeterminedDiv" style="display: none">DeterminedDiv</div>
<div id="CompassionateDiv" style="display: none">CompassionateDiv</div>
<div id="ConsiderateDiv" style="display: none">ConsiderateDiv</div>

There are alternative ways of doing this which require less code, such as this method using a little CSS and document.querySelectorAll():

function showDiv(divName) {
  // First remove the selected class from all divs in output-divs
  document.querySelectorAll('#output-divs > .selected').forEach(element => {
    element.classList.remove('selected');
  });
  
  // Then add it to the div corresponding to the button clicked
  document.getElementById(divName).classList.add('selected');
}

.output-div:not(.selected) {
  display: none;
}

<input type="button" value="Brave" onclick="showDiv('brave')">
<input type="button" value="Determined" onclick="showDiv('determined')">
<input type="button" value="Compassionate" onclick="showDiv('passionate')">
<input type="button" value="Considerate" onclick="showDiv('considerate')">

<div id="output-divs">
  <div class="output-div selected" id="brave">Brave</div>
  <div class="output-div" id="determined">Determined</div>
  <div class="output-div" id="passionate">Compassionate</div>
  <div class="output-div" id="considerate">Considerate</div>
</div>

$(document).ready(function() {
    $("#btn1").click(function(){
        showDiv('div1');
    });
    $("#btn2").click(function(){
        showDiv('div2');
    });
    $("#btn3").click(function(){
        showDiv('div3');
    });
    $("#btn4").click(function(){
        showDiv('div4');
    });    
});

function showDiv(_divId){
	$(".div-class").each(function() {
    	if(!$(this).hasClass('div-hide'))
        $(this).addClass('div-hide');
	});
        
	$('#' + _divId).removeClass('div-hide');
}

.div-class {
    	min-height: 50px;
        border: 1px solid #eee;
        margin: 10px;
        padding: 10px;
        width: 100%;
    }
    .div-hide {
    	display: none;
    }

<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
<button id="btn4">Button 4</button>

<div id="div1" class='div-class div-hide'><h3>Div1 Content </h3></div>
<div id="div2" class='div-class div-hide'><h3>Div2 Content </h3></div>
<div id="div3" class='div-class div-hide'><h3>Div3 Content </h3></div>
<div id="div4" class='div-class div-hide'><h3>Div4 Content </h3></div>

本文标签： wordpressJavascriptOpenClose functionStack Overflow