Thread

I am implementing a simple 1 page site (for now) which includes javascript drop down content based on this article:

http://www.harrymaugans.com/2007/03/05/how-to-create-a-collapsible-div-with-javascript-and-css/

The javascript code is as follows:

function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }

and the hyperlink link code is:

<a href="[removed];" onmousedown="toggleDiv('mydiv');">Toggle Div Visibility</a>

The way I am planning to implement this is that I have the {title} of the document hyperlinked to activate a drop down DIV containing the {body.

Can someone let me know how I can make my DIV tags dynamic for each article and then personalise the css so it applies to all DIV's containing the article body?

The non-live site is here:

http://www.theboxerrebellion.com/index.php/site/indexnew/

Thanks

I assume I would have to include the CSS design in the DIV tag containing the {body} info so it would apply to all.  Is this true?

I’m a big fan of jQuery which has a built in function called toggle to do exactly what you describe.
In jQuery that’s just one line of code and you won’t have to litter your html with “onmousedown” and calling functions from within your html code.
Just give each div a class and you can simply do

$("div.my_class").toggle()

Thanks very much for that. I think i’ll try that too.  Simpler is always better in my book.

T