Develop Reference

How can I hide a div until a button is clicked?

I'm trying to create 3 divs that are hidden when the page load, so that when I click their respective buttons they show up, however, no matter what I do, I cannot get them to show up with the button click.
Here is the relevant part of the code:
My div and button:
<button onclick="TestsFunction()">Tests</button>
<div id="TestsDiv" style="display:none">
tests here!
</div>
And the JS used to show it:
function TestsFunction() {
var T = document.getElementById("TestsDiv");
T.style.display = "none";}
I can successfully hide the div when I load the page, however after I click the button it doesn't show up again.
I tried
window.onload = function(){
document.getElementById('TestsDiv').style.display = 'none';
}
Instead of style="display:none" on the div to see if the way I hid it was the problem, but the div still wouldn't show up.
I'm a beginner and I'm not good with JS, HTML or PHP, if possible can someone both help and explain my mistake? Do I need something else in my code? I tried reading similar threads but the solutions were all too complicated for my understanding and I ended up not being able to fix my problem. Thank you!

You need to set display to block (or something else) but not hide when button is clicked!
function TestsFunction() {
var T = document.getElementById("TestsDiv");
T.style.display = "block"; // <-- Set it to block
}
<button onclick="TestsFunction()">Tests</button>
<div id="TestsDiv" style="display:none">
tests here!
</div>

try
function TestsFunction() { TestsDiv.style.display = 'block' }
function TestsFunction() { TestsDiv.style.display = 'block' }
<button onclick="TestsFunction()">Tests</button>
<div id="TestsDiv" style="display:none">
tests here!
</div>

You need to adapt your function to toggle the display of the div. Currently it is only hiding it - but if its already hidden, remove the display = "none" to show it again. You remove it by setting the display style to an empty string (which makes it default).
function TestsFunction() {
var T = document.getElementById("TestsDiv"),
displayValue = "";
if (T.style.display == "")
displayValue = "none";
T.style.display = displayValue;
}
<button onclick="TestsFunction()">Tests</button>
<div id="TestsDiv" style="display:none">
tests here!
</div>
If you only want it to be shown, and not to be able toggle display on and off, just set it to the empty string right away.
function TestsFunction() {
document.getElementById("TestsDiv").style.display = "";
}
<button onclick="TestsFunction()">Tests</button>
<div id="TestsDiv" style="display:none">
tests here!
</div>

You should look into jQuery's hide() and show() methods. They take care of setting the styles for you.
https://www.w3schools.com/jquery/jquery_hide_show.asp

do like this =>
function TestsFunction(){
$("#TestsDiv").css("display","block")
}
before that you should include jquery cdn.
thank you.

Click outside an element doesn't work

I have this code:
function showAll(el){
var id = el.parentNode.id;
var all= document.getElementById(id).getElementsByClassName('items')[0];
if(all.style.display === 'block'){
all.style.display = 'none';
} else{
all.style.display = 'block';
window.addEventListener('mouseup', function(e){
document.getElementById('test').innerHTML = e.target.className;
if(e.target != all){
all.style.display = 'none';
}
});
}
}
<div id="parent">
<div class="selected" onClick="showAll(this);">
</div>
<div class="items" style="display: none">
</div>
</div>
Basically what i want to achieve is: click on selected to display items which is now hidden after that if i click again on selected or if i click outside of items(a random spot on that page or even on selected) i want to be able to hide items.
The problem is that without the EventListener when i click on selected it works to display items and then if i click again on selected it works to hide items but if i click on a random spot it doesn't work to close items.
But when i add EventListener and i click on selected it works to click a random spot to close items but it doesn't work to click selected again to close items.
Can anybody help me with a full JavaScript explanation, please?

You're going to want to use highly reusable code. I use change() and id_() on my web platform all of the time and it's very direct and simple. In the below example the second parameter will make the class empty (you can also use id_('items').removeAttribute('class') for a cleaner DOM (Document Object Model)).
HTML
<input onclick="change(id_('items','');" type="button" value="Display Items" />
<div clas="hidden" id="items"><p>Items here.</p></div>
CSS
.hidden {display: none;}
JavaScript
function change(id,c)
{
if (id_(id)) {id_(id).className = c; if (id_(id).className=='') {id_(id).removeAttribute('class');}}
else if (id) {id.className = c; if (id.className=='') {id.removeAttribute('class');}}
else {alert('Error: the class id \''+id+'\' was not found or has not yet been imported to the DOM.\n\nNew class intended: '+c);}
}
function id_(id)
{
if (id == '' && window['console']) {console.log('Developer: empty id called from: '+id_.caller.toString().split('function ')[1].split('(')[0]);}
return (document.getElementById(id)) ? document.getElementById(id) : false;
}
This code exists from years of refining the same platform instead of industry standard drama of pointlessly changing things. You are two clicks from finding more highly reusable functions on my platform's JavaScript documentation from the link in my profile.

Div element hide and show

I have a hidden div element.
<div class= "CTL" id="CTL" runat="server" style="display:none">
<p class ="divider">
CTL
</p>
<asp:Button ID="CTL_button" runat="server" Text="View CTL"
onclick="CTL_button_Click" />
</div>
I am trying to make the div element appear or stay hidden based on an SQL value returned on page Load:-
window.onload= function show_CTL() {
if("<%=_CurrentUser.IsCTL%>" == "True"){
document.getElementById('CTL').style.display ="block";
}
else{
// document.getElementById('CTL').style.display ="none";
}
But the div element remains shown regardless of value returned...
It seems like only the true part of the loop gets executed...

Use display:none to hide the div in first place
<div class= "CTL" id="CTL" style="display:none" runat="server">
<p class ="divider">
CTL
</p>
<asp:Button ID="CTL_button" runat="server" Text="View CTL"
onclick="CTL_button_Click" />
</div>
then you can show it with
document.getElementById('CTL').style.display ="block";

Cast the condition to a Boolean in JavaScript you can do it like this:
window.onload = function show_CTL() {
var el = document.getElementById('CTL');
if(Boolean("<%=_CurrentUser.IsCTL%>") && el){
el.style.display = "block";
}
else{
el.style.display = "none";
}
}
If the Boolean object has no initial value, or if the passed value is one of the following:
0
-0
null
""
false
undefined
NaN
the object is set to false. For any other value it is set to true (even with the string "false")!
Now I wonder, why not simply add the condition inside the visible attribute?
<div class="CTL" id="CTL" runat="server" visible=<%=_CurrentUser.IsCTL%>></div>
No JavaScript needed this way.

ASP.NET is changing the IDs, thats why you have to take the clientID of your element.
document.getElementById("<%= CTL.ClientID %>").style.display = "block";

visible and display are 2 different css property,
you set visible first, but later you change display,
you should change visible, not display,
of cause you can use display instead of visible in the first place.

Javascript function changeImage: Issues using variables for getElementById or getElementsByName

I'm having some trouble getting my code to do what I want. I have multiple sections that I have set to toggle show/hide, and it functions correctly. However, I'm now trying to switch the images to where instead of always being static with "More," I'd like it to switch to "Less" when it's expanded.
It does work... but only for the first one. If I press the buttons on any of the others, it only changes just the first one. You can see the page here:
http://jfaq.us
I've tried several different solutions with variables, but I can't seem to get it to work.
Help? Thanks in advance!
function changeImage() {
if (document.getElementById("moreorless").src == "http://jfaq.us/more.png")
{
document.getElementById("moreorless").src = "http://jfaq.us/less.png";
}
else
{
document.getElementById("moreorless").src = "http://jfaq.us/more.png";
}
}
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none")
{
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
<div>
Guestbook
<div>
<input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage();return toggleMe('para3')" >
</div>
<div id="para3" style="display:none">
This is normally hidden, but shows up upon expanding.
This is normally hidden, but shows up upon expanding.
</div>
About
<div>
<input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage();return toggleMe('para2')" >
</div>
<div id="para2" style="display:none">
This is normally hidden, but shows up upon expanding.
This is normally hidden, but shows up upon expanding.
</div>
</div>

The id attribute must be unique. That's why it's not working. Also, it's not a good idea to use inline event handlers like you are doing, you should register event handlers using addEventListener instead.
Without changing all your code, one thing you can do is pass a reference to the currently clicked element to the changeImage function.
function changeImage(el) {
var moreUrl = 'http://jfaq.us/more.png';
el.src = el.src === moreUrl? 'http://jfaq.us/less.png' : moreUrl;
}
Then change the inline handler for onclick="changeImage(this);"

You are using same Id for all inputs. This is causing the problem.
Give every element a unique Id.
If you want to perform grp operation use jquery class.

That's because you use the same id for the both images, and getElementById apparently takes the first one.
Here is the updated code:
html:
<input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage.call(this);return toggleMe('para3')" >
script:
// inside the event handler 'this' refers to the element clicked
function changeImage() {
if (this.src == "http://jfaq.us/more.png") {
this.src = "http://jfaq.us/less.png";
} else {
this.src = "http://jfaq.us/more.png";
}
}

check this
http://jsfiddle.net/Asb5A/3/
function changeImage(ele) {
if (ele.src == "http://jfaq.us/more.png")
{
ele.src = "http://jfaq.us/less.png";
}
else
{
ele.src = "http://jfaq.us/more.png";
}
}
<input type="image" src="http://jfaq.us/more.png" onclick="changeImage(this);return toggleMe('para3')" >

JQuery - Toggle an image inside of a div on click?

So I have a toggled div with an image inside of it that toggles the scrolling of the next div:
<div class="section">
<img src="on.png"> Stuff </div>
<div class="under" style="height:302px;"> Hi </div>
Here's the JQuery for it:
$(".section").click(function(){
$(this).next('div').slideToggle(1200);
});
How would I make it so on the click function for my div, it toggles the image to "off.png"? And if the src is "off.png", it toggles to "on.png"? Thanks. (Sorry I'm still a noob at JQuery)

$(function(){
$(".section").click(function(){
$("img").attr('src',
($("img").attr('src') == 'http://www3.picturepush.com/photo/a/2772891/64c/png/power-off.png?v0'
? 'http://kiwianon.com/forums/Themes/Simple_Green/images/on.png'
: 'http://www3.picturepush.com/photo/a/2772891/64c/png/power-off.png?v0'
)
)
});
});
demo

$(".section").click(function(){
var img = $(this).find("img").eq(0); //add an Id to your img tag so you can refine this selector.
if(img.attr("src") == "on.png")
{
img.attr("src","off.png");
}
else{
img.attr("src","on.png");
}
$(this).next('div').slideToggle(1200);
});

Ken, this is very simple! Just use the code below:
$('.section').click(function(){
var currentimg=$(this).find('img').attr('src');
if(currentimg=="off.png"){
$(this).find('img').attr('src','on.png');
}
else{
$(this).find('img').attr('src','off.png');
}
});

Use $(selector).attr("src", "theImageFilePath") to change the image.
The state could be represented in several ways, including global/module variable, $(selector).data(...), or simply by checking the current value of the "src" attribute.