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.
Related
I have a link with a plus symbol (More Details[+]) ... when the user clicks the link, I want the link to change to a minus (More Details[-]), and show the content below it. I can show/hide the content, but the +/- toggle doesn't work. Note: I'm new to javascript, so please be patient with my lack of knowledge...
Note: There are a few posts about +/- toggles. I need help with the code that I wrote below.
Below is the javascript...
// Plus/Minus Toggle
function toggle_plus(id) {
var f = document.getElementById(id);
if (f.classList.contains("showplus")) {
f.removeClass("showplus");
f.addClass("showminus");
} else {
f.removeClass("showminus");
f.addClass("showplus");
}
}
// Toggle to show and hide content below the link
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}
And below is the html for the content.....
<div class="teamdetail">
More Details [<span id="team4Plus" class="showplus"></span>]
</div>
<div id="team4" class="teamtxt">
Text Goes Here
</div>
And the CSS for the showplus and showminus
.showminus:before { content: '-'; }
.showplus:before { content: '+'; }
.removeClass and .addClass are jQuery functions. You need to use .classList.add and .classList.remove
// Plus/Minus Toggle
function toggle_plus(id) {
var f = document.getElementById(id);
if (f.classList.contains("showplus")) {
f.classList.remove("showplus");
f.classList.add("showminus");
} else {
f.classList.remove("showminus");
f.classList.add("showplus");
}
}
// Toggle to show and hide content below the link
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}
.showminus:before { content: '-'; }
.showplus:before { content: '+'; }
<div class="teamdetail">
More Details [<span id="team4Plus" class="showplus"></span>]
</div>
<div id="team4" class="teamtxt">
Text Goes Here
</div>
In addition to Dave's answer (I don't have enough rep to comment :/), toggle is your friend.
// Plus/Minus Toggle
function toggle_plus(id) {
var f = document.getElementById(id);
f.classList.toggle("showplus");
f.classList.toggle("showminus");
}
Will do the same.
Also, the Chrome inspector console is your friend - it would've been throwing up errors to you. https://developers.google.com/web/tools/chrome-devtools/console/
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.
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));
}
I want to switch/toggle visibility between div id1 and div id2. I want div id2 to display by default when the page loads and when I click on a link I want div id1 to replace div id2. I have tried a few different methods, even played around with it on jsfiddle a bit but I can't figure out what I am missing here.
HTML:
Change Payment Method
<div id="id1" style="display: none"><p>test 1</p></div>
<div id="id2"><p>test 2</p></div>
JavaScript:
function toggle_visibility(id1, id2) {
var e = document.getElementById(id1);
var e2 = document.getElementById(id2);
if(e.style.display == 'block') {
e.style.display = 'block';
e2.style.display = 'none';
}
else {
e.style.display = 'none';
e2.style.display = 'block';
}
}
Look at the function signature:
function toggle_visibility(id1, id2)
^^^^^^^^
Look how you are calling it:
onclick="toggle_visibility('id'); toggle_visibility('id2');"
^^^^ ^^^^^
Do they match? No. You want one call with two arguments
onclick="toggle_visibility('id1', 'id2');"
The other issue is your function is wrong, see Fibbe's solution for that
You need to use brackets in order to have multiple lines affected by the if-statement:
function toggle_visibility(id1, id2) {
var e = document.getElementById(id1);
var e2 = document.getElementById(id2);
if(e.style.display == 'block') {
e.style.display = 'block';
e2.style.display = 'none';
}
else {
e.style.display = 'none';
e2.style.display = 'block';
}
}
You seem to have wrongly written the statements qithin "if" and "else" in javascript function. The correct way is-
function toggle_visibility(id1, id2) {
var e = document.getElementById(id1);
var e2 = document.getElementById(id2);
if(e.style.display == 'block') {
e.style.display = 'block';
e2.style.display = 'none';
}
else {
e.style.display = 'none';
e2.style.display = 'block';
}
}
Also, you have passed the arguments in wrong way, the correct way is-
Change Payment Method
<div id="id1" style="display: none"><p>test 1</p></div>
<div id="id2"><p>test 2</p></div>
This code might be helpful:
<div id="mydivon" style="display:block">This is on.</div>
<div id="mydivoff" style="display:none">This is off.</div>
Toggle Div Visibility
<script language="javascript">
function toggleDiv(divid)
{
varon = divid + 'on';
varoff = divid + 'off';
if(document.getElementById(varon).style.display == 'block')
{
document.getElementById(varon).style.display = 'none';
document.getElementById(varoff).style.display = 'block';
}
else
{
document.getElementById(varoff).style.display = 'none';
document.getElementById(varon).style.display = 'block'
}
}
</script>
If u can use Jquery:
Html
<a id="button" >Click</a>
<div class="div show">1</div>
<div class="div">2</div>
Javascript
$('#button').click(function() {
$('.div').toggleClass('show');
});
Css
.div {display:none;}
.show {display:block;}
Change Payment Method
<div id="id1" style="display: none"><p>test 1</p></div>
<div id="id2"><p>test 2</p></div>
I have a small script consisting of the code:
<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>
And some HTML:
Test Me
<br/>
<div id="test" style="display:none;">
Hello there
</div>
The code makes it so that when the Test Me link is clicked the becomes visible, I am curious about how to make it so that when clicked the Test Me link the text colour would change?
Well.
First the onclick attr is wrong, you see. The function is calling toggle_..., then it makes the rest.
The js-script
function toggle_visibility(id,$this) {
var e = document.getElementById(id);
if(e.style.display == 'block')
{
$this.style.color = '';
e.style.display = 'none';
}
else
{
$this.style.color = 'gold';
e.style.display = 'block';
}
}
and the html-code
Test Me<br/>
<div id="test" style="display:none;">
Hello there
Edit, I also added $this to also now the element that was clicked.
onclick="javascript: jQuery('#test').css('color', 'red'); return false;"