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>
Related
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;
}
}
I am using a code that unhides a hidden div.
HTML:
<div id="unhide" style="display:none;">DUMMY TEXT</div>
<button id="expand" name="expand">Show The Div</button>
JS:
document.getElementById("expand").addEventListener("click", function()
{
document.getElementById('unhide').style.display = "block";
});
How can I make the same button hide the div after clicking it again? Is it possible to alter the code I am using now?
use toggle to simple hide and unhide div
$("#expand").click(function() {
$("#unhide").toggle();
});
Use toggle for this show and shide, see below code.
$(document).ready(function(){
$("#expand").click(function(){
$("#unhide").toggle();
});
});
By doing some modifications in JavaScript, you can use the same button to hide the div as well as you can change the button text like below.
JS:
document.getElementById("expand").addEventListener("click", function()
{
var displayDiv = document.getElementById('unhide');
var displayValue = (displayDiv.style.display === "block") ? "none" : "block";
this.innerHTML = (displayValue === "block") ? "Hide The Div" : "Show The Div";
displayDiv.style.display = displayValue;
});
Link reference: https://jsfiddle.net/pitchiahn/hctnvsz1/1/
use simple if-else control flow
document.getElementById("expand").addEventListener("click", function()
{
var elem = document.getElementById('unhide');
if(elem.style.display == "none") { elem.style.display = "block"; }
else { elem.style.display = "none"; }
});
You can use .toggle()
$('#buttonId').on('click', function(e){
$("#DivId").toggle();
$(this).toggleClass('class1')
});
.class1
{
color: orange;
}
use toggleClass() to toggle the class for the button
$('#buttonLogin').on('click', function(e){
$("#login_Box_Div").toggle();
$(this).toggleClass('class1')
});
.class1
{
color: orange;
}
document.getElementById("expand").addEventListener("click", function()
{
if(document.getElementById('unhide').style.display == 'block')
document.getElementById('unhide').style.display = 'none';
else
document.getElementById('unhide').style.display = 'block';
});
you can check the running snippet here
this is pure java script
var button = document.getElementById('button'); // Assumes element with id='button'
button.onclick = function() {
var div = document.getElementById('newpost');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
This worked very well for me, hope it can help someone else. it opens a hidden div in an absolute position and closes it with the same button or the button in the div.
I use it for menu functions.
<div id="myDiv6" style="border:1px solid;background: rgba(255, 255, 255,
0.9);display: none;position: absolute; top: 229px; left: 25%; z-
index:999;height: auto;
width: 500px;">
<h2 >menu item</h2>
what ever you want in the hidden div
<button style="cursor: pointer;border-radius: 12px;background-image: linear-
gradient(to right, red,yellow);font-size:16px;"
onclick="changeStyle6()">Close</button>
</div>
<br/>
<button style="cursor: pointer;border-radius: 12px;background-image: linear-
gradient(to right, red,yellow);font-size:16px;width: 125px;"
onclick="changeStyle6()">button text</button><br/>
<script type="text/javascript">
function changeStyle6(){
var element = document.getElementById("myDiv6");
if(element.style.display == "none") { element.style.display = "block"; }
else { element.style.display = "none"; }
}
</script>
The below code snippet shows the invite code when I click "Invite Code". But how do I re-hide the invite code if the same link is clicked again? And can it be done where it cycles back and forth with subsequent clicks? I didn't write this code but merely modified it to my use. I am still very new to this type of thing. Thanks!
<style>
div.hide { display:none; }
div.show { text-align:center; }
</style>
<script type='text/javascript'>
function showText(show, hide) {
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<br>
<font color="red">-</font>Home<font color="red"> / </font><a onclick="showText('text1')" href="javascript:void(0);">Invite Code</a>-</font>
<div id="text1" class="hide"><font color="red">abc123</font></div>
</center></h3>
Simply use this function:
function showText(id)
{
var elem = document.getElementById(id);
if(elem.style.display == 'none')
{
elem.style.display = 'inline';
}
else
{
elem.style.display = 'none';
}
}
<a onClick="showText('text1');" href="#">Show or Hide</a><br/>
<div style="height: 30px;"><div id="text1" style="display: none;">Text to hide or show... WTF?!</div></div>
<div>This text should not move.</div>
PS: This also works for 2 Elements...
Greetings
I really don't see the use for the show class. You could just toggle the hide class on the elements that you want to toggle.
Assume you dont need the show class, then use the classList.toggle function like this
function toggle(target){
document.getElementById(target).classList.toggle('hide');
}
.hide{ display:none }
<button onclick="toggle('test')">Show / Hide</button>
<div id="test" class="hide">Hello world!</div>
save the state with a boolean
var hided = true;
function showText(show,hide){
if (hided){
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
else{
document.getElementById(show).className = "hide";
document.getElementById(hide).className = "show";
}
hided = !hided;
}
fiddle with this code and some of your html : fiddle,
isn't it the expected behavior ?
<html>
<div ID="content" style="display:block;">This is content.</div>
<script type="text/javascript">
function toggleContent() {
// Get the DOM reference
var contentId = document.getElementById("content");
// Toggle
contentId.style.display == "block" ? contentId.style.display = "none" :
contentId.style.display = "block";
}
</script>
<button onclick="toggleContent()">Toggle</button>
</html>
//Code is pretty self explanatory.
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 = =.
Example
<script type="text/javascript">
function showme(id) {
var divid = document.getElementById(id);
if (divid.style.display == 'block') divid.style.display = 'none';
else divid.style.display = 'block';
}
</script>
<a onclick="showme('widget');" href="#">Show Widget</a>
<div id="widget" style="display:none;">
This is a widget
</div>
I want change text Show Widget & Hide Widget. Let me know
Demo http://jsfiddle.net/SLcDE/
<script type="text/javascript">
function showme(id, linkid) {
var divid = document.getElementById(id);
var toggleLink = document.getElementById(linkid);
if (divid.style.display == 'block') {
toggleLink.innerHTML = 'Show Widget';
divid.style.display = 'none';
}
else {
toggleLink.innerHTML = 'Hide Widget';
divid.style.display = 'block';
}
}
</script>
<a id="toggler" onclick="showme('widget', this.id);" href="#">Show Widget</a>
<div id="widget" style="display:none;">
This is a widget
</div>
You can change the text in your toggle block like this:
<script type="text/javascript">
function showme(id) {
var divid = document.getElementById(id);
if (divid.style.display == 'block') {
divid.style.display = 'none';
$('#toggleDisplay').text('Show Widget');
}
else{
divid.style.display = 'block';
$('#toggleDisplay').text('Hide Widget');
}
}
</script>
<a onclick="showme('widget');" href="#" id="toggleDisplay" >Show Widget</a>
<div id="widget" style="display:none;">
This is a widget
</div>
`<script type="text/javascript">`<br/>
`function showme(id) {`<br/>
`var divid = document.getElementById(id);`<br/>
`var clicky = document.getElementById("clicky");`<br/>
`if (divid.style.display == 'block') {divid.style.display = 'none';clicky.innerHTML = "Show Widget";}`<br/>
`else {divid.style.display = 'block'; clicky.innerHTML = "Hide Widget";}
}`<br/>
`</script>`<br/>
`<a onclick="showme('widget');" href="#" id="clicky">Show Widget</a>`<br/>
`<div id="widget" style="display:none;">`<br/>
`This is a widget`<br/>
`</div>`<br/>