Develop Reference

Div to toggle it's display on/off but be able to click the input

I'm trying to make it so that whenever you click on either the button OR div itself, the display toggles. But whenever I click on the input inside of the div, the div disappears.
How can this be made so that you can still click on the input and the div not disappear? I've tried setting a z-index to the input but this fails.
Appreciate any help, thank you.
function doThis() {
var el = document.querySelector('div');
if (el.style.display === 'flex') {
el.style.display = 'none';
} else {
el.style.display = 'flex';
}
}
div {
background: lightgreen;
display: flex;
}
<button onclick='doThis()'>click me</button>
<div onclick='doThis()'>
text <input type="text">
</div>

If you want the input click not to trigger the div click, you can use event.stopPropagation() function. It prevents event bubbling (passing the event to higher level DOM-elements).
function doThis() {
var el = document.querySelector('div');
if (el.style.display === 'flex') {
el.style.display = 'none';
} else {
el.style.display = 'flex';
}
}
div {
background: lightgreen;
display: flex;
}
<button onclick='doThis()'>click me</button>
<div onclick='doThis()'>
text <input onclick='event.stopPropagation()' type="text">
</div>

For a pure JavaScript solution (that doesn't need jQuery), see this answer from #Sabaz to How do I prevent a parent's onclick event from firing when a child anchor is clicked?:
document.getElementById("clickable").addEventListener("click", function( e ){
e = window.event || e;
if(this === e.target) {
// put your code here
}
});
Your code wont be executed if clicked on parent's childs

you can do this:
function doThis(evt) { // <-- new: add argument
evt.preventPropagation() // <-- new, works in all new browsers
var el = document.querySelector('div');
if (el.style.display === 'flex') {
el.style.display = 'none';
} else {
el.style.display = 'flex';
}
}
And add to your html:
onclick='doThis(event)'

Why cant you implement event stopPropagation for all input objects, Try ..
// select elements with js selectors and bind it
document.querySelector('input').onclick = function(e){
e.stopPropagation()
};
and here is answer by Rex M

Just check the target element which is clicked
function doThis() {
if(event.target.nodeName != "INPUT"){
var el = document.querySelector('div');
if (el.style.display === 'flex') {
el.style.display = 'none';
} else {
el.style.display = 'flex';
}
}
}

Toggling visibility of multiple texts is not working

I am trying to toggle between a couple of texts, where the only one that shows is the one that was "turn on" most recently. For example, the default would look something like this:
Click A
Click B
If you click 'Click B', the text for that will toggle to something else, let's say "You've clicked B".
Click A
You've Clicked B
If you click 'Click A' right afterwards, then the previous text will go back to its default, ie "You've Clicked B" will revert back to 'Click B' and then 'Click A' will be turn on.
Right now, neither of them are toggling, they are just both on.
Here is what I have:
JavaScript
toggle_visibility("t1");
toggle_visibility("t2");
function toggle_visibility(id) {
function toggle(id){
var text = document.getElementById(id);
if(text.style.display == 'none'){
text.style.display = 'block';
}
else{
text.style.display = 'none';
}
}
toggle(id);
}
HTML
<div id="t1" <a href="Click A" onclick="toggle_visibility('t1');">
<h1>You've Clicked A</h1></div>
<div id="t2" <a href="Click B" onclick="toggle_visibility('t2');">
<h1>You've Clicked B</h1></div>

It's better if you assign an id to the <h1> tag like this and I have added some attributes:
<div> <a href="#" onclick="toggle_visibility('t1');">
<h1 id="t1" data-original="Click A" data-after="You've clicked A" data-toggled="0">Click A</h1></div>
<div> <a href="#" onclick="toggle_visibility('t2');">
<h1 id="t2" data-original="Click B" data-after="You've clicked B" data-toggled="0">Click B</h1></div>
For the JS, you can use this:
<script>
var isFirst = true;
function toggle_visibility(id) {
if(!isActivated(id)) {
toggle(id);
if(isFirst != true) {
if(id == "t1") {
toggle("t2");
} else if(id == "t2") {
toggle("t1");
}
}
}
isFirst = false;
}
function toggle(id) {
var text = document.getElementById(id);
if(text.getAttribute("data-toggled") == "1") {
text.setAttribute("data-toggled", "0");
text.innerHTML = text.getAttribute("data-original");
}
else {
text.innerHTML = text.getAttribute("data-after");
text.setAttribute("data-toggled", "1");
}
}
function isActivated(id) {
var element = document.getElementById(id);
if(element.getAttribute('data-toggled') == "1") {
return true;
} else {
return false;
}
}
</script>

Check your HTML first.
<div id="t1">**** <a href="Click A" onclick="toggle_visibility('t1');">
<h1>You've Clicked A</h1></div>
<div id="t2">**** <a href="Click B" onclick="toggle_visibility('t2');">
<h1>You've Clicked B</h1></div>
There should be a closing ">" near the place I marked ****. Again, you have not closed your anchor tag with an "</a>"

I can't be sure that I interpreted your HTML correctly (there are several errors in it), but other than that, I believe this solves the problem:
var visibleText;
function toggle_visibility(id) {
var text = document.getElementById(id).lastElementChild;
if (text.style.display === 'none') {
if (visibleText) visibleText.style.display = 'none';
visibleText = text;
text.style.display = 'block';
} else {
text.style.display = 'none';
}
}
This code keeps track of any currently toggled-on 'text' in a variable declared outside the scope of the toggle_visibility function. This allows you to easily toggle off any currently visible text and switch on the desired text.
And here's a JSFiddle.

It closes DIV on second click, why?

I have a javascript function which should close the div on click. However, it works on the second click. How can I avoid that ?
JavaScript
function showhide(id) {
var e = document.getElementById(id);
if(e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}
HTML
<div id="foota123">
Content
<div onclick="showhide('foota123')" class="iks">X</div>
</div>

e.style refers to the style attribute of the div (style="..."). First time through, there is no style attribute on the div. The condition is false and the code sets a style attribute of:
<div style="display: block">
The second time through, the if condition is true, and the style of the block is set to "none". So it disappears.

Your code does not handles the computed style on the element, hence on first click the element is still in display:block.
Try this with jQuery:
function showhide(id) {
$('#'+id).toggle();
}
$.toggle() will show the element if it is hidden else hide.

The style property is empty by default; for example:
var e = document.createElement('div');
e.style.display; // ""
Simply reversing the condition should fix that:
function showhide(id) {
var e = document.getElementById(id);
e.style.display = e.style.display == 'none' ? 'block' : 'none';
}

Try this, if you want straight javascript, the jQuery answer is better though :)
function showhide(id) {
var e = document.getElementById(id);
if( e.style.display!=='none' ) e.style.display = 'none';
else e.style.display = 'block';
}
<div id="foota123">
Content
<div onclick="showhide('foota123')" class="iks">click me</div>
</div>

It works for me.
Html code
<div id="foota123">
Content
</div>
<div onclick="showhide('foota123')" class="iks">X</div>
Script
<script type="text/javascript">
function showhide(id) {
var e = document.getElementById(id);
if(e.style.display == 'block'){
e.style.display = 'none';
}
else{
e.style.display = 'block';
}
}
</script>
OR style="block" is also a better option.

external links not working html/javascript

I have created a click to show option on one of my client's website. Which is working perfectly there.
Its respective code is given below.
<style>
a{padding:0;margin:0;color:#009cbb;font-weight:bold;text-decoration:none;}
</style>
<p>
<div>Welcome</div>
<div id="welcome" style="display:none;">This is test</div>
<div>Focus</div>
<div id="focus" style="display:none;">This is test2
</div>
<div>Cataracts</div>
<div id="cataracts" style="display:none;">This is test2
</div>
</p>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
When i link test1 from an external page Its should display test1 and keep close the other 2 but the problem is when I click on the link it shows all of them as closed.
The linking code is
Read More >
Kindly help me when someone click on Read more it displays the welcome message as open and others as closed.
Thanks

Try this - tested in IE8, Chrome32 and Fx 24 on windows
Live Demo
Live Demo With Hash
function toggle_visibility(link) {
var id = link.hash.substring(1);
var obj = document.getElementById(id);
if (obj) obj.style.display = obj.style.display == "block"?"none":"block";
return false;
}
window.onload=function() {
var id = location.hash?location.hash.substring(1):"";
if (id) document.getElementById(id).style.display="block";
}
using this format on each link (which should also be refactored to be unobtrusive)
onclick="return toggle_visibility(this);"
Please note the (this)

HA I finally figured out what you want!
So you want the element to be opened on page load if the link ends with #element_id.
Your script tag currently:
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
Change it to:
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
var parts = window.location.split('#'),
hash = '';
if (parts.length > 1) {
hash = parts[1];
}
if (hash !== '') {
toggle_visibility(hash);
}
</script>
EDIT:
window.location.hash is apparently supported everywhere. You might want to use that instead of string.split()

Though I did not clearly understand your problem, I have modified your function based on my assumptions.
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block' || e.style.visibility == 'visible') {
e.style.display = 'none';
e.style.visibility = "hidden";
} else {
e.style.display = 'block';
e.style.visibility = 'visible';
}
}
Please let us know what are the modifications you find needed.

FIDDLE
window.onload = function(){
toggle_visibility(window.location.hash.substring(1));
}

Expand/Collapse - Javascript

I have this code for expanding and collapsing a link area, but I want it to open the page with the option to expand the link, instead of it already being expanded, what am I doing wrong here:
CSS:
body { font:10pt Verdana; }
a { color:green; }
#content { background-color:#ffffff; width:800px; margin-top:2px; }
JavaScript:
function toggle(id) {
var e = document.getElementById(id);
if (e.style.display == 'none')
e.style.display = '';
else
e.style.display = 'none';
}
function toggle2(id, link) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
e.style.display = '';
link.innerHTML = 'Expand';
} else {
e.style.display = 'none';
link.innerHTML = 'Collapse';
}
}
</script>
HTML:
Lady SabO Artist Bio
<div id="content">
text goes here!
</div>

You need to start it hidden with something like display:none or width:0px. Then add attribute or css to display. Better yet, create a 'displayed' class and add it to the element with JQuery in the onclick event.