...

View Full Version : Help with show/hide divs through add/remove class



katpal
06-26-2012, 05:01 PM
Hi to all,
I am new to javascript and actually quite desperate by now

I have an HTML file that:
a. gets data from an XML file and displays them in various divs (e.g. <div class='box' id='b0'> )
b. these divs are hidden (display:none) by a class name (class='box')
c. when a link is clicked, I pass the 'href' to the function showContent, remove the #, and then look for an element with that ID in the document.
d. then I add a new class name ('show' = display:block) - so that this element shows up!

If you run the code you will see that every time you click on a link a new div is displayed... so both of them show

So current problems:
a. replace already shown divs with the new clicked ID so that only one div shows up every time.

b. How can I avoid inserting the onClick event in every single <a href> tag - and make this more automated?


----------

My code is as follows:



function showContent(obj)
{
var linkTo = obj.getAttribute("href");
var newlinkTo=linkTo.replace('#','');
//alert (newlinkTo);

document.getElementById(newlinkTo).innerHTML=" This is where the xml variable content should go";
document.getElementById(newlinkTo).className += " Show";

return true;
}

<a href="#b0" onClick="return showContent(this);">
<div id="text_content"> link2 </div>
</a>

<a href="#b1" onClick="return showContent(this);">
<div id="text_content"> link 1 </div>
</a>

<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>

abduraooft
06-27-2012, 07:43 AM
See
<script type="text/javascript">
window.onload= function(){
var linkTo;
var links=document.getElementById('wrap').getElementsByTagName('a');
for(var i=0; i<links.length;i++){
links[i].onclick=function(){
alert(linkTo);
if(linkTo)
document.getElementById(linkTo).className= "box";
linkTo = this.getAttribute("href").replace('#','');
//alert(linkTo);
document.getElementById(linkTo).innerHTML=" This is where the xml variable content should go"+this.innerHTML;
document.getElementById(linkTo).className = "Show";
}
}

}

</script>
<div id="wrap">
<a href="#b0" >
link2
</a>

<a href="#b1" >
link 1
</a>

<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>
</div>

a. replace already shown divs with the new clicked ID so that only one div shows up every time.
Sorry, that's not clear.

PS: You can't put block level element (like div) inside an inline element (like anchor)

siberia-man
06-27-2012, 10:11 AM
katpal
Look these links. They contain some information related to your questions. Additionally I'd like to say that the better to handle click on a href element is handle document.onclick and check there that the target element was href. To be sure that the handler processes valid hrefs is to assign specific class name for these elements to differ them on other hrefs.

http://www.codingforums.com/showpost.php?p=1004060&postcount=13
http://www.codingforums.com/showpost.php?p=1005402&postcount=15

abduraooft

You can't put block level element (like div) inside an inline element (like anchor)
Really we can put any elements within any elements. But not all insertions are correct and valid due to the specification.

katpal
06-28-2012, 08:19 AM
Hi thanks to all of you!

abduraooft,

this actually works... and I took Siberia-man's advice to add a line of extra code to detect only these specific links by adding the substring-checking line here:


function scan(){
var linkTo;
var links=document.getElementById('wrap').getElementsByTagName('a');
//alert (links.length);
for(var i=0; i<links.length; i++){

links[i].onclick=function showHide(){

if (this.getAttribute("href").substring (0,2)== "#b") {
//alert ("this is a valid link");
if(linkTo) // the variable set from the previous click e.g. b0
document.getElementById(linkTo).className= "box";

linkTo = this.getAttribute("href").replace('#','');
//alert(linkTo);
document.getElementById(linkTo).className = "show";
return false;
}
else
{
return;
}
}
}
}

Don't know if its correct (being a newbie) but it works,
thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum