Javascript question
- Started
- Last post
- 21 Responses
- CygnusZero4
How do I take the show/hide code below and change it so that "Now you see me" is hidden by default?
<a href="javascript:hideshow(document.getElementById('adiv'))">Click here</a>
<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script><div id="adiv" style="font:24px bold; display: block">Now you see me</div>
- Krassy0
<div id="adiv" style="font:24px bold; display: none">Now you see me</div>
- CygnusZero40
Lolz, I was trying display hidden. No clue why. Barely know anything about this shit. Thanks.
- I make that mistake all the time.jtb26
- Lolz is RIGHT, right?monospaced
- CygnusZero40
One last question. How do you take this script and make it so each item clicked closes all of the other open items. Right now you can expand all which I dont want. In the end it will look like this:
<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script><a href="javascript:hideshow(document.getElementById('adiv1'))">Option 1</a>
<div id="adiv1" style="font:24px bold; display: block">Option 1 description</div><a href="javascript:hideshow(document.getElementById('adiv2'))">Option 2</a>
<div id="adiv2" style="font:24px bold; display: block">Option 2 description</div><a href="javascript:hideshow(document.getElementById('adiv3'))">Option 3</a>
<div id="adiv3" style="font:24px bold; display: block">Option 3 description</div>
- uan0
function hideallothers(which){
document.getElementById('adiv1...
document.getElementById('adiv2...
document.getElementById('adiv3...
which.style.display="block";
}
- dbloc0
function hideallothers(which){
$(".adiv").css("display","none...
$(which).css("display","block");
}- with a class of adivdbloc
- Something is wrong with this script. Doesnt paste right into dreamweaver. Im not a programmer guys. Keep it simple please.CygnusZero4
- please.CygnusZero4
- yeah it's truncating the code.dbloc
- dbloc0
<a href="javascript:hideallothers('adiv3')">Option 3</a>
<div id="adiv3" class="adiv">Option 3 description</div>
- CygnusZero40
^ How do you execute the hideallothers function? Sorry not really an expert developer.
- CygnusZero40
How do I take the below and when you expand one, turn all others off? I know nothing about this stuff so I kind of need this code modified. I dont know how to execute multiple functions and all that and cant seem to get either option above to work.
<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script>
<a href="javascript:hideshow(document.getElementById('adiv1'))">Option 1</a>
<div id="adiv1" style="font:24px bold; display: block">Option 1 description</div>
<a href="javascript:hideshow(document.getElementById('adiv2'))">Option 2</a>
<div id="adiv2" style="font:24px bold; display: block">Option 2 description</div>
<a href="javascript:hideshow(document.getElementById('adiv3'))">Option 3</a>
<div id="adiv3" style="font:24px bold; display: block">Option 3 description</div>- Well I shouldnt say I know nothing, just not much of a javascript guy.CygnusZero4
- monospaced0
Yikes. So glad I got into graphic design and not web stuff.
- Lol you say that in every thread I have a tech question in.CygnusZero4
- I say that whenever I see a page of code. It's just so far from what I do as a designer, that's all. LOL.monospaced
- Lmao its not that hard. I just struggle with stupid javascript shit here and there. Sometimes flash issues.CygnusZero4
- wordmonospaced
- uan0
<a href="javascript: hideallothers(document.getElementById('adiv1'))">Option 1</a>
- uan0
but depending on how much you need any more js on the page, it's worth using jquery and access the classes like dbloc suggested
- CygnusZero40
This is what im not understanding. I already have a function on the buttons, that I cant remove! Its needed to expand them. Youre removing it in the code youre sending so I dont know what to do. I am not a programmer. HALP!!!
a href="javascript:hideshow(docume...
- dbloc0
add the display none within the function that you are calling, just make sure it's before you
<script type="text/javascript">
function hideshow(which){
document.getElementById('adiv1... = "none";
document.getElementById('adiv2... = "none";
document.getElementById('adiv3... = "none";
which.style.display="none"
}
</script>- lolCygnusZero4
- see previous postCygnusZero4
- where you are calling it is fine...see pastebin link belowdbloc
- dbloc0
add the display none within the function that you are calling, just make sure it's before you
function hideshow(which){
document.getElementById('adiv1... = "none";
document.getElementById('adiv2... = "none";
document.getElementById('adiv3... = "none";
which.style.display="none"
}
- dbloc0
- Doesnt work. All this does is break the expanding which I already had working.CygnusZero4
- last one should say 'block' not nonedbloc
- CygnusZero40
Ok, guys I dont know javascript. Pretend this is my very first day doing this. How do I take this code and make it so that when the buttons are clicked, all are collapsed. PLEASE edit this code. Dont send snippets of code. I do not know how to implement what youre sending.
<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script>
<a href="javascript:hideshow(document.getElementById('adiv1'))">Option 1</a>
<div id="adiv1" style="font:24px bold; display: block">Option 1 description</div>
<a href="javascript:hideshow(document.getElementById('adiv2'))">Option 2</a>
<div id="adiv2" style="font:24px bold; display: block">Option 2 description</div>
<a href="javascript:hideshow(document.getElementById('adiv3'))">Option 3</a>
<div id="adiv3" style="font:24px bold; display: block">Option 3 description</div>
- CygnusZero40
Ok that fixed it dbloc. That none should have been block so I thought I was doing something wrong. Works fine now, whew. Thanks.
- dbloc0
ok man...try this.
http://pastebin.com/zsVdUDDQ- < use this one...so clicking it when open it will closedbloc
- Its extremely buggy. Did you test it?CygnusZero4
- CygnusZero40
Oh man, nevermind, have you tested these 2 options? Both are really funky and buggy. I thought at first it was working right but its not at all.