Mixing
Javascript, Open/Close function
0
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
edited Nov 19 '18 at 14:22
peeebeee
1,0491119
asked Nov 19 '18 at 13:42
Anthony Cdf Whitefield
286
add a comment |
0
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
edited Nov 19 '18 at 14:22
peeebeee
1,0491119
asked Nov 19 '18 at 13:42
Anthony Cdf Whitefield
286
are you looking for accordion
– Negi Rox
Nov 19 '18 at 13:45
add a comment |
0
0
0
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
edited Nov 19 '18 at 14:22
peeebeee
1,0491119
asked Nov 19 '18 at 13:42
Anthony Cdf Whitefield
286
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
javascript wordpress button
edited Nov 19 '18 at 14:22
peeebeee
1,0491119
asked Nov 19 '18 at 13:42
Anthony Cdf Whitefield
286
edited Nov 19 '18 at 14:22
peeebeee
1,0491119
asked Nov 19 '18 at 13:42
Anthony Cdf Whitefield
286
edited Nov 19 '18 at 14:22
peeebeee
1,0491119
edited Nov 19 '18 at 14:22
peeebeee
1,0491119
edited Nov 19 '18 at 14:22
peeebeee
1,0491119
1,0491119
asked Nov 19 '18 at 13:42
Anthony Cdf Whitefield
286
asked Nov 19 '18 at 13:42
Anthony Cdf Whitefield
286
asked Nov 19 '18 at 13:42
Anthony Cdf Whitefield
286
286
are you looking for accordion
– Negi Rox
Nov 19 '18 at 13:45
add a comment |
are you looking for accordion
– Negi Rox
Nov 19 '18 at 13:45
are you looking for accordion
– Negi Rox
Nov 19 '18 at 13:45
are you looking for accordion
– Negi Rox
Nov 19 '18 at 13:45
add a comment |
5 Answers
5
active
oldest
votes
1
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>answered Nov 19 '18 at 13:52
cmprogram
1,103519
1
Thank you or this comprehensive answer, and explaining it further.
– Anthony Cdf Whitefield
Nov 19 '18 at 14:15
If I was to add an extra div would this work the same? For example, I have 4 buttons and 4 divs of content. Is it possible with this method to have an extra div that is visible at the start until a button selection is made?
– Anthony Cdf Whitefield
Nov 19 '18 at 15:40
@AnthonyCdfWhitefield Correct. Using jQuery you would have to make no changes. With the JavaScript solution, you would simply have to add more values in your array. So instead of var divsToCheck = ["BraveDiv", "CompassionateDiv"]; you would have, var divsToCheck = ["BraveDiv", "CompassionateDiv", "AddedDiv", "MoreDivs", "EvenMoreEtc"]; Simply ensure those strings exist as div IDs. i.e. for every value in the divsToCheck array, make sure a div exists with that ID. Then pass that ID as the parameter to the function.
– cmprogram
Nov 19 '18 at 15:44
add a comment |
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";
}
answered Nov 19 '18 at 14:26
Shailly Kudiyal
212
Please explain your answer
– Mike
Nov 19 '18 at 14:34
@mike i created 3 div's and set their display as "none". Now on each button's click i call above written functions setting the display of particular div as "block" and others as "none".
– Shailly Kudiyal
Nov 19 '18 at 15:06
add a comment |
1
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.
answered Nov 19 '18 at 13:55
SpaceSnail
113
add a comment |
1
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('compassionate')">
<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="compassionate">Compassionate</div>
<div class="output-div" id="considerate">Considerate</div>
</div>answered Nov 19 '18 at 13:59
MTCoster
2,97621938
Thank you for your comprehensive answer so promptly, this is a massive help!
– Anthony Cdf Whitefield
Nov 19 '18 at 14:16
add a comment |
1
$(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.com/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>answered Nov 19 '18 at 14:06
Aquib Iqbal
21417
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375934%2fjavascript-open-close-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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>answered Nov 19 '18 at 13:52
cmprogram
1,103519
1
Thank you or this comprehensive answer, and explaining it further.
– Anthony Cdf Whitefield
Nov 19 '18 at 14:15
If I was to add an extra div would this work the same? For example, I have 4 buttons and 4 divs of content. Is it possible with this method to have an extra div that is visible at the start until a button selection is made?
– Anthony Cdf Whitefield
Nov 19 '18 at 15:40
@AnthonyCdfWhitefield Correct. Using jQuery you would have to make no changes. With the JavaScript solution, you would simply have to add more values in your array. So instead of var divsToCheck = ["BraveDiv", "CompassionateDiv"]; you would have, var divsToCheck = ["BraveDiv", "CompassionateDiv", "AddedDiv", "MoreDivs", "EvenMoreEtc"]; Simply ensure those strings exist as div IDs. i.e. for every value in the divsToCheck array, make sure a div exists with that ID. Then pass that ID as the parameter to the function.
– cmprogram
Nov 19 '18 at 15:44
add a comment |
1
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>answered Nov 19 '18 at 13:52
cmprogram
1,103519
1
Thank you or this comprehensive answer, and explaining it further.
– Anthony Cdf Whitefield
Nov 19 '18 at 14:15
If I was to add an extra div would this work the same? For example, I have 4 buttons and 4 divs of content. Is it possible with this method to have an extra div that is visible at the start until a button selection is made?
– Anthony Cdf Whitefield
Nov 19 '18 at 15:40
@AnthonyCdfWhitefield Correct. Using jQuery you would have to make no changes. With the JavaScript solution, you would simply have to add more values in your array. So instead of var divsToCheck = ["BraveDiv", "CompassionateDiv"]; you would have, var divsToCheck = ["BraveDiv", "CompassionateDiv", "AddedDiv", "MoreDivs", "EvenMoreEtc"]; Simply ensure those strings exist as div IDs. i.e. for every value in the divsToCheck array, make sure a div exists with that ID. Then pass that ID as the parameter to the function.
– cmprogram
Nov 19 '18 at 15:44
add a comment |
1
1
1
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>answered Nov 19 '18 at 13:52
cmprogram
1,103519
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(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>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>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(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>answered Nov 19 '18 at 13:52
cmprogram
1,103519
edited Nov 19 '18 at 14:13
answered Nov 19 '18 at 13:52
cmprogram
1,103519
answered Nov 19 '18 at 13:52
cmprogram
1,103519
answered Nov 19 '18 at 13:52
cmprogram
1,103519
1,103519
1
Thank you or this comprehensive answer, and explaining it further.
– Anthony Cdf Whitefield
Nov 19 '18 at 14:15
If I was to add an extra div would this work the same? For example, I have 4 buttons and 4 divs of content. Is it possible with this method to have an extra div that is visible at the start until a button selection is made?
– Anthony Cdf Whitefield
Nov 19 '18 at 15:40
@AnthonyCdfWhitefield Correct. Using jQuery you would have to make no changes. With the JavaScript solution, you would simply have to add more values in your array. So instead of var divsToCheck = ["BraveDiv", "CompassionateDiv"]; you would have, var divsToCheck = ["BraveDiv", "CompassionateDiv", "AddedDiv", "MoreDivs", "EvenMoreEtc"]; Simply ensure those strings exist as div IDs. i.e. for every value in the divsToCheck array, make sure a div exists with that ID. Then pass that ID as the parameter to the function.
– cmprogram
Nov 19 '18 at 15:44
add a comment |
1
Thank you or this comprehensive answer, and explaining it further.
– Anthony Cdf Whitefield
Nov 19 '18 at 14:15
If I was to add an extra div would this work the same? For example, I have 4 buttons and 4 divs of content. Is it possible with this method to have an extra div that is visible at the start until a button selection is made?
– Anthony Cdf Whitefield
Nov 19 '18 at 15:40
@AnthonyCdfWhitefield Correct. Using jQuery you would have to make no changes. With the JavaScript solution, you would simply have to add more values in your array. So instead of var divsToCheck = ["BraveDiv", "CompassionateDiv"]; you would have, var divsToCheck = ["BraveDiv", "CompassionateDiv", "AddedDiv", "MoreDivs", "EvenMoreEtc"]; Simply ensure those strings exist as div IDs. i.e. for every value in the divsToCheck array, make sure a div exists with that ID. Then pass that ID as the parameter to the function.
– cmprogram
Nov 19 '18 at 15:44
1
1
Thank you or this comprehensive answer, and explaining it further.
– Anthony Cdf Whitefield
Nov 19 '18 at 14:15
Thank you or this comprehensive answer, and explaining it further.
– Anthony Cdf Whitefield
Nov 19 '18 at 14:15
If I was to add an extra div would this work the same? For example, I have 4 buttons and 4 divs of content. Is it possible with this method to have an extra div that is visible at the start until a button selection is made?
– Anthony Cdf Whitefield
Nov 19 '18 at 15:40
If I was to add an extra div would this work the same? For example, I have 4 buttons and 4 divs of content. Is it possible with this method to have an extra div that is visible at the start until a button selection is made?
– Anthony Cdf Whitefield
Nov 19 '18 at 15:40
@AnthonyCdfWhitefield Correct. Using jQuery you would have to make no changes. With the JavaScript solution, you would simply have to add more values in your array. So instead of var divsToCheck = ["BraveDiv", "CompassionateDiv"]; you would have, var divsToCheck = ["BraveDiv", "CompassionateDiv", "AddedDiv", "MoreDivs", "EvenMoreEtc"]; Simply ensure those strings exist as div IDs. i.e. for every value in the divsToCheck array, make sure a div exists with that ID. Then pass that ID as the parameter to the function.
– cmprogram
Nov 19 '18 at 15:44
@AnthonyCdfWhitefield Correct. Using jQuery you would have to make no changes. With the JavaScript solution, you would simply have to add more values in your array. So instead of var divsToCheck = ["BraveDiv", "CompassionateDiv"]; you would have, var divsToCheck = ["BraveDiv", "CompassionateDiv", "AddedDiv", "MoreDivs", "EvenMoreEtc"]; Simply ensure those strings exist as div IDs. i.e. for every value in the divsToCheck array, make sure a div exists with that ID. Then pass that ID as the parameter to the function.
– cmprogram
Nov 19 '18 at 15:44
add a comment |
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";
}
answered Nov 19 '18 at 14:26
Shailly Kudiyal
212
Please explain your answer
– Mike
Nov 19 '18 at 14:34
@mike i created 3 div's and set their display as "none". Now on each button's click i call above written functions setting the display of particular div as "block" and others as "none".
– Shailly Kudiyal
Nov 19 '18 at 15:06
add a comment |
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";
}
answered Nov 19 '18 at 14:26
Shailly Kudiyal
212
Please explain your answer
– Mike
Nov 19 '18 at 14:34
@mike i created 3 div's and set their display as "none". Now on each button's click i call above written functions setting the display of particular div as "block" and others as "none".
– Shailly Kudiyal
Nov 19 '18 at 15:06
add a comment |
2
2
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";
}
answered Nov 19 '18 at 14:26
Shailly Kudiyal
212
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";
}
answered Nov 19 '18 at 14:26
Shailly Kudiyal
212
answered Nov 19 '18 at 14:26
Shailly Kudiyal
212
answered Nov 19 '18 at 14:26
Shailly Kudiyal
212
answered Nov 19 '18 at 14:26
Shailly Kudiyal
212
212
Please explain your answer
– Mike
Nov 19 '18 at 14:34
@mike i created 3 div's and set their display as "none". Now on each button's click i call above written functions setting the display of particular div as "block" and others as "none".
– Shailly Kudiyal
Nov 19 '18 at 15:06
add a comment |
Please explain your answer
– Mike
Nov 19 '18 at 14:34
@mike i created 3 div's and set their display as "none". Now on each button's click i call above written functions setting the display of particular div as "block" and others as "none".
– Shailly Kudiyal
Nov 19 '18 at 15:06
Please explain your answer
– Mike
Nov 19 '18 at 14:34
Please explain your answer
– Mike
Nov 19 '18 at 14:34
@mike i created 3 div's and set their display as "none". Now on each button's click i call above written functions setting the display of particular div as "block" and others as "none".
– Shailly Kudiyal
Nov 19 '18 at 15:06
@mike i created 3 div's and set their display as "none". Now on each button's click i call above written functions setting the display of particular div as "block" and others as "none".
– Shailly Kudiyal
Nov 19 '18 at 15:06
add a comment |
1
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.
answered Nov 19 '18 at 13:55
SpaceSnail
113
add a comment |
1
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.
answered Nov 19 '18 at 13:55
SpaceSnail
113
add a comment |
1
1
1
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.
answered Nov 19 '18 at 13:55
SpaceSnail
113
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.
answered Nov 19 '18 at 13:55
SpaceSnail
113
answered Nov 19 '18 at 13:55
SpaceSnail
113
answered Nov 19 '18 at 13:55
SpaceSnail
113
answered Nov 19 '18 at 13:55
SpaceSnail
113
113
add a comment |
add a comment |
1
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('compassionate')">
<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="compassionate">Compassionate</div>
<div class="output-div" id="considerate">Considerate</div>
</div>answered Nov 19 '18 at 13:59
MTCoster
2,97621938
Thank you for your comprehensive answer so promptly, this is a massive help!
– Anthony Cdf Whitefield
Nov 19 '18 at 14:16
add a comment |
1
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('compassionate')">
<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="compassionate">Compassionate</div>
<div class="output-div" id="considerate">Considerate</div>
</div>answered Nov 19 '18 at 13:59
MTCoster
2,97621938
Thank you for your comprehensive answer so promptly, this is a massive help!
– Anthony Cdf Whitefield
Nov 19 '18 at 14:16
add a comment |
1
1
1
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('compassionate')">
<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="compassionate">Compassionate</div>
<div class="output-div" id="considerate">Considerate</div>
</div>answered Nov 19 '18 at 13:59
MTCoster
2,97621938
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('compassionate')">
<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="compassionate">Compassionate</div>
<div class="output-div" id="considerate">Considerate</div>
</div>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>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>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('compassionate')">
<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="compassionate">Compassionate</div>
<div class="output-div" id="considerate">Considerate</div>
</div>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('compassionate')">
<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="compassionate">Compassionate</div>
<div class="output-div" id="considerate">Considerate</div>
</div>answered Nov 19 '18 at 13:59
MTCoster
2,97621938
answered Nov 19 '18 at 13:59
MTCoster
2,97621938
answered Nov 19 '18 at 13:59
MTCoster
2,97621938
answered Nov 19 '18 at 13:59
MTCoster
2,97621938
2,97621938
Thank you for your comprehensive answer so promptly, this is a massive help!
– Anthony Cdf Whitefield
Nov 19 '18 at 14:16
add a comment |
Thank you for your comprehensive answer so promptly, this is a massive help!
– Anthony Cdf Whitefield
Nov 19 '18 at 14:16
Thank you for your comprehensive answer so promptly, this is a massive help!
– Anthony Cdf Whitefield
Nov 19 '18 at 14:16
Thank you for your comprehensive answer so promptly, this is a massive help!
– Anthony Cdf Whitefield
Nov 19 '18 at 14:16
add a comment |
1
$(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.com/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>answered Nov 19 '18 at 14:06
Aquib Iqbal
21417
add a comment |
1
$(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.com/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>answered Nov 19 '18 at 14:06
Aquib Iqbal
21417
add a comment |
1
1
1
$(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.com/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>answered Nov 19 '18 at 14:06
Aquib Iqbal
21417
$(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.com/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>$(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.com/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>$(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.com/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>answered Nov 19 '18 at 14:06
Aquib Iqbal
21417
answered Nov 19 '18 at 14:06
Aquib Iqbal
21417
answered Nov 19 '18 at 14:06
Aquib Iqbal
21417
answered Nov 19 '18 at 14:06
Aquib Iqbal
21417
21417
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375934%2fjavascript-open-close-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
are you looking for accordion
– Negi Rox
Nov 19 '18 at 13:45