I have two div with different content. In page reload i would to have one DIV content to display as defualt however by clicking on button the content should change in same DIV content area and the another button also need disable. here is my code Im able to show and hide text but by defualt both text is displayed also both button are active.
enter image description here
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
document.getElementById('btn').disabled = 'disabled';
y.style.display = "none";
}
}
function myFunction1() {
var y = document.getElementById("myDIV1");
if (y.style.display === "none") {
y.style.display = "block";
} else {
y.style.display = "none";
}
}
</script>
<button class="btn btn-primary about" id="btn" onclick="myFunction()">Base Solution</button>
<button class="btn btn-primary about" onclick="myFunction1()">Augmented Solution</button>
<div class="col-md-6" id="myDIV">
<ul class="custom">
<li>Automation of the elementary CITES permit procedures</li>
<li>Transparency and accountability in the permit process</li>
</ul>
</div>
<div class="col-md-6" id="myDIV1">
<ul class="custom">
<li>Integration and maintenance of a database of registered facilities</li>
<li>Extension of national eCITES reporting Automation of other processes to support various business models and national legislations</li>
</ul>
</div>
I tweaked your code a little bit
i've given id to the second button,and merged the two function to one
Link : https://jsfiddle.net/guz2de7h/2/
<button class="btn btn-primary about" id="btn" onclick="myFunction(this)">Base Solution</button>
<button class="btn btn-primary about" id="btn2" onclick="myFunction(this)">Augmented Solution</button>
document.getElementById('btn').disabled = 'disabled';
var x = document.getElementById("myDIV");
var y = document.getElementById("myDIV1");
y.style.display = "none";
function myFunction(btn) {
var btnid = btn.id;
if(btnid=="btn2")
{
x.style.display = "none";
y.style.display = "block";
document.getElementById('btn2').disabled = 'disabled';
document.getElementById('btn').disabled = false;
}
else
{
x.style.display = "block";
y.style.display = "none";
document.getElementById('btn').disabled = 'disabled';
document.getElementById('btn2').disabled = false;
}
}
Related
I have a simple function when I click on a button to display text for the button, everything is ok but on the first click it's not working then after the second click it's working perfectly can anybody tell me whats my mistake? I have the element hidden in CSS display;none, here is my logic
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
#myDIV {
display: none;
}
<button type="button" class="btn btn-primary btn-lg btn-block" onclick="myFunction()">
<div id="myDIV">
This is my DIV element.
</div>
The problem is probably that you didn't close the button tag. So it doesn't find myFunction(). You also need to fetch the computed value of display style not the elements value because css files do not affect the elements styles directly. (e.g. vs style="")
<body>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (getComputedStyle(x).display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<button
type="button"
class="btn btn-primary btn-lg btn-block"
onclick="myFunction()"
>
test
</button>
<div id="myDIV">
This is my DIV element.
</div>
</body>
This question already has answers here:
How can I hide/show a div when a button is clicked?
(9 answers)
Closed 2 years ago.
Please can someone explain this situation?
I want to use the same function (hide/show) for more buttons. How can I call the same function with different buttons?
I found how to do it with one but can't find any solution for 2 or more buttons.
I would like to hide div1 if I click on bt1 and hide div2 if I click on bt2. Thank you for any help...
My current code is:
function myFunction() {
var x = document.getElementById("div1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<html>
<body>
<button id="bt1" onclick="myFunction()">Button 1</button>
<div id="div1">div1</div>
<p></p>
<button id="bt2" onclick="myFunction()">Button 2</button>
<div id="div2">div2</div>
</body>
</html>
Thank you for your help...
You could pass the ID of the div to your function as a parameter:
function myFunction(el) {
var x = document.getElementById(el);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button id="bt1" onclick="myFunction('div1')">Button 1</button>
<div id="div1">div1</div>
<p></p>
<button id="bt2" onclick="myFunction('div2')">Button 2</button>
<div id="div2">div2</div>
One way is to pass the ID of the DIV as a function parameter.
function myFunction(id) {
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<html>
<body>
<button id="bt1" onclick="myFunction('div1')">Button 1</button>
<div id="div1">div1</div>
<p></p>
<button id="bt2" onclick="myFunction('div2')">Button 2</button>
<div id="div2">div2</div>
</body>
</html>
Another way is to pass the button itself, and use DOM navigation, if the DIV to hide and show is always right after the button.
function myFunction(button) {
var x = button.nextElementSibling;
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<html>
<body>
<button id="bt1" onclick="myFunction(this)">Button 1</button>
<div id="div1">div1</div>
<p></p>
<button id="bt2" onclick="myFunction(this)">Button 2</button>
<div id="div2">div2</div>
</body>
</html>
I would do it like so:
Add a data-attribute like data-js-hide="div1"
Add a click event listener for all those elements having the attribute data-js-hide
when clicked use the value "div1" from the attribute data-js-hide
The advantages are that it does not matter where in DOM the elements are. You just need to set the attribute with id, and then on click the item with the id will be hidden or shown accordingly.
function myFunction(event) {
var x = document.getElementById(event.target.dataset.jsHide);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
var buttons = document.querySelectorAll('[data-js-hide]');
buttons.forEach(
button => {
button.addEventListener('click', myFunction);
}
);
<html>
<body>
<button data-js-hide="div1" >Button 1</button>
<div id="div1">div1</div>
<p></p>
<button data-js-hide="div2">Button 2</button>
<div id="div2">div2</div>
<p></p>
<button data-js-hide="div3">Button 3</button>
<div id="div3">div3</div>
</body>
</html>
I have this button tag element
<button class="btn btn-link" type="button" onclick="contentDownloads()">
<img src="./downloads/content-textures.svg" width="120px" />
</button>
And has a javascript function
function contentDownloads() {
var x = document.getElementById("vipDownloads");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
But, in the future I will include more buttons and would lead to the same function.
This is the part that contains the IDs:
<div id="vipDownloads" class="collapse show" style="display: none;">
<div class="card-body">
<h5 class="card-title">Map Pack v 1.8 <span class="caption-entry">by cWaLker</span> </h5>
<p class="card-text">
Aight Fellas,
Map Pack v 1.8 introduces some revived classics and under the radar stunners. <br>
<br> 1.7 went on a diet and dropped some restraining pounds.
For this nugget to work stable, you'd need to remove your own user folder first and then drop the User folder from the 1.8 bulk package.. it will serve you everything you need anyways ;-)<br>
<br> Have Fun Guys lets kick some flips!
</p>
<button type="button" class="btn btn-outline-success">Download</button><br>
</div>
</div>
You can see here how I designed the buttons and content http://thpsblog.000webhostapp.com/downloads.html (the css on my host takes a while to actually update, might include some white on white colors)
The function hides and unhides content.
I have found some solutions but they were all typed in jQuery, and unfortunately I do not know jQuery.
How could I make this function take two unique ids?
Make the ID of the element to toggle a parameter of the function, and pass it when you call the function.
function contentDownloads(id) {
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button class="btn btn-link" type="button" onclick="contentDownloads('vipDownloads')">
<img src="./downloads/content-textures.svg" width="120px" />
</button>
If you don't want to add an onclick event to your html, you can create a vars array and use a forEach loop. Else, you can use #Barmar's answer.
function contentDownloads() {
var x = document.getElementById("vipDownloads");
var y = document.getElementById("y");
var z = document.getElementById("z");
vars = [x,y,z]; // update this array when selected a new element
vars.forEach(function(p){
if (p.style.display === "none") {
p.style.display = "block";
} else {
p.style.display = "none";
}
})
}
Make id param as others suggested or use data attributes:
<button class="btn btn-link" type="button" onclick="contentDownloads(this)" data-downloadsid="vipDownloads">
<img src="./downloads/content-textures.svg" width="120px" />
</button>
function contentDownloads(element) {
var x = document.getElementById(element.dataset.downloadsid);
if(x == null) return;
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
You can query the elements with a class and iterate each
<div class="download-element">Element 1</div>
<div class="download-element">Element 2</div>
<div class="download-element">Element 3</div>
<button class="btn btn-link" type="button" onclick="contentDownloads()">
<img src="./downloads/content-textures.svg" width="120px" />
</button>
function contentDownloads() {
document.querySelectorAll('.download-element')
.forEach(element => {
if(element.style.display === "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
})
}
i want to hide button when i click it. But i want my content to be shown when i click the button.
#sectiontohide{
display: none;}
function toggle_div_fun(id) {
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
}
<button onclick="toggle_div_fun('sectiontohide');">Display Content</button>
<div id="sectiontohide">`
this is the content i'd like to show when i click the button and button should disappear
Try this:
function toggle_div_fun(id, btn) {
var divelement = document.getElementById(id);
btn.style.display = "none";
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
}
<button onclick="toggle_div_fun('sectiontohide', this);">Display Content</button>
<div id="sectiontohide" style="display:none">Content</div>
If you do not need to reuse the code, maybe this is simpler:
<button onclick="document.getElementById('sectiontohide').style.display='block'; this.style.display='none'">Display Content</button>
<div id="sectiontohide" style="display:none">Content</div>
The idea is to make two div appear or disappear based on the click. The CSS display style is set to none.
Any help is appreciated.
<div id="mainOval">
<form id="btns">
<input type="button" value="Timer" id="timerBtn" onclick="displayCont('Timer')"/>
<input type="button" value="Countdown" id="ctDownBtn" onclick="displayCont('Countdown')"/>
</form>
</div>
<div id="Timer">
</div>
<div id="Countdown">
</div>
<script type="text/javascript">
function displayCont(inp)
{
var ele = document.getElementById(inp);
var shown = ele.style.display;
if (shown == 'none')
{
ele.style.display = 'block';
}
else if (shown == 'block')
{
ele.style.display = 'none';
}
}
</script>
The correct code is:
if (shown == 'none') {
ele.style.display = 'block';
}
else if (shown == 'block'){
ele.style.display = 'none';
}
You have ot set the style of the element, not just assign a Javascript variable. And equality is ==, not = =.