homepage Welcome to WebmasterWorld Guest from 54.167.138.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Hide and Display Div
hiding a displaying a div tag with javascript
matthewamzn




msg:3867398
 7:12 pm on Mar 10, 2009 (gmt 0)

I'm making an faq page. When someone clicks on a question I want the answer to appear below it. This is what I've got so far, but it's not changing the style on click:

<script>
function displayAnswer($id) {
var status = document.getElementById($id).getAttribute("style");
if (status === "display:none;") {
document.getElementById($id).setAttribute("style","display:block;");
} else {
document.getElementById($id).setAttribute("style","display:none;");
}
}
</script>

This is the affected php code:
echo "<a href='javascript:displayAnswer({$faq[faq_id]});'>{$faq[question]}</a><br/>";
echo "<div id='{$faq[faq_id]}' style='display:none;'>{$faq[answer]}<br/></div>";

 

daveVk




msg:3867653
 12:56 am on Mar 11, 2009 (gmt 0)

Try

function displayAnswer($id) {
var el = document.getElementById($id);
if ( el.style.display === "none") { el.style.display = "block" ); }
else { el.style.display = "none"); }
}

This does not rely on textual representations, edit case etc.
If it still don't work check php generated html.

matthewamzn




msg:3867669
 1:19 am on Mar 11, 2009 (gmt 0)

I can't get that to work either:

<script>
function displayAnswer($id) {
var el = document.getElementById($id);
if ( el.style.display === "none") { el.style.display = "block" ); }
else { el.style.display = "none"); }
}
</script>
<a href="javascript:displayAnswer(2);">Some Question?</a><br/>
<div id="2" style="display:none;">Some Answer<br/></div>

daveVk




msg:3867739
 3:11 am on Mar 11, 2009 (gmt 0)

id's should start with a letter, try adding a prefix say

<a href="javascript:displayAnswer("x2");">Some Question?</a><br/>
<div id="x2" style="display:none;">Some Answer<br/></div>

matthewamzn




msg:3867772
 4:43 am on Mar 11, 2009 (gmt 0)

Thanks, this is working now:

<script>
function displayAnswer($id) {
var el = document.getElementById($id);
if (el.style.display === "none") {
el.style.display = "block"; } else {
el.style.display = "none"; }
}
</script>
<a href="javascript:displayAnswer('x2');">Some Question?</a><br/>
<div id="x2" style="display:none;">Some Answer<br/></div>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved