New course! Every coder should learn Generative AI!
Try a free lesson+ 2
How to make default hidden in this code?
"function myFunction() { var x = document.getElementById('myDIV'); if (x.style.display === 'none') { x.style.display = 'block'; } else { x.style.display ='none'; } } " my code :- https://code.sololearn.com/WEiWzHIQjs8N/?ref=app
30 Answers
+ 6
Hacking Tiger hey.
To hide a div content, you can use hidden attribute
<div class="example" hidden="true" >
<p>Third paragraph (like test)
</p>
</div>
Or like
<div class="example" style="display:none;" >
<p>Third paragraph (like test)
</p>
</div>
+ 3
Just set 'display:none' to your 'myDIV' id element related css style declaration (eventually in the 'style' attribute of the tag)... or set it dynamically through JS at start/initialization of script:
window.onload = function() {
document.getElementById('myDIV').style.display='none';
}
+ 3
Anyway, 'display:none' will completly retrieve the element from display... without keeping the space previously used. If you don't want this behaviour, rather hide it with the 'visibility' or 'opacity' properties ;)
+ 3
<input type="button" value="first" id="first" onclick="func(this);">
<input type="button" value="second" id="second" onclick="func(this);" style.display="none">
function func(eref) {
eref.style.display = 'none';
if (eref.id=='first') {
document.getElementById('second').style.display = '';
}
else {
document.getElementById('first').style.display = '';
}
}
... but in the case of button (as well <input> or <button>), you can handle that with only one button element, just dynamically changing the 'value' attribute (or the 'innerHTML' of <button>) and testing it rather than the id in case of <input>:
<input type="button" value="second" onclick="func(this);">
function func(eref) {
eref.style.display = 'none';
if (eref.value=='first') {
eref.value = 'second';
}
else {
eref.value = 'first';
}
}
+ 3
It doesn't really matter: I've just expressed my disapointment after having thinking fixing your problem ;)
+ 3
I just realize that what you've wanted can be called 'accordion'... and I have one already write about one month ago:
https://code.sololearn.com/W86rM5c1y6uJ/?ref=app
^^
+ 2
Share your whole code if you need specific help: your question seemed ask for specific example to understand in general purpose... but if you had a specific context/case, provide code and description of your requirement at begining as much accurate possible ;)
+ 2
https://code.sololearn.com/WhxmJmNUkdZu/?ref=app
Does it do the expected job?
+ 2
Ok, I think I understand what you want now. Here's how I did it--is this right?
https://code.sololearn.com/Wq3yi9kc8Js3/?ref=app
+ 2
Sure... I cannot understand that because you provide a code with once content: to be able to display 2 differents contents, you need to have 2 :P (or dynamically replace your content ^^)
+ 2
@Hacking Tiger wrote: << visph can i add more div in it >>
In my accordion code, yes sure: you can add how many contents you want/need... the only limitation actually is code require few adaptation to target another #id (now hard coded 'accordion') and be able to handle many accordion instances and/or nested ones...
Anyway, actual behaviour is to close all content on opening new one (as radio button group), meaning that you only can have many opened ones at same time only at start (by applying the 'default' class on the 'accordion-toggle' command elements ^^ (obviously some changes in code can be made to have different behaviour ;P)
+ 2
Copy paste this in place of all html (duplicated content to get 6 'button' rather 3 ^^)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="accordion">
<h4 class="accordion-toggle">Accordion 1</h4>
<div class="accordion-content default">
<p>Cras malesuada ultrices augue molestie risus.</p>
</div>
<h4 class="accordion-toggle">Accordion 2</h4>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
</div>
<h4 class="accordion-toggle">Accordion 3</h4>
<div class="accordion-content">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
<h4 class="accordion-toggle">Accordion 1</h4>
<div class="accordion-content default">
<p>Cras malesuada ultrices augue molestie risus.</p>
</div>
<h4 class="accordion-toggle">Accordion 2</h4>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
</div>
<h4 class="accordion-toggle">Accordion 3</h4>
<div class="accordion-content">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>
</body>
</html>
+ 1
i want to hide div content
+ 1
will it work visph
and after clicking outside of page it should get hidden
+ 1
see im going to add another button so when I click on first button then it should show the content and then when I click on second button then it should get disappear and show second button content
+ 1
In the link to your code, for the part inside the else statement, you have 'show' where you should have 'none'. If you fix that, the button successfully toggles visibility for the div.
+ 1
ok what of button1
+ 1
Do you need an explanation or can you follow the code?
+ 1
😔🙏
+ 1
The simplest way to add more sections or divs to each button would be to create new divs within the existing div--they will all get hidden/shown when the main div is hidden/shown.
Also, you can make more buttons but they will need the acordian class. Maybe just copy one of the others.
Often have questions like this?
Learn more efficiently, for free:
Hot today
Help me plss
3 Votes
Android studio emulator
0 Votes
Return function
1 Votes
help me
0 Votes
Can anyone guide me
0 Votes
Internal vs external JS
1 Votes
Wrong?
0 Votes
My question
0 Votes