1 Topic by Jérémie (edited by Jérémie 2007-02-19 04:24)

  • From: France
  • Registered: 2004-11-06
  • Posts: 695

Topic: Javascript html collapse?

Is there a javascript coder around here? I'm looking for a little twingie, and I can't get a clean good tutorial to work sad

This what I want to do: in the page header, I call to a javascript function. This function needs to: first collapse the XHTML elements (identified by their's XHTML's class, specified in the script), then insert an image or text buttonish link that will toggle (on/off) the collapse.

So I would have a :

<h3>some header</h3>
<ul class="plom">
<li>blabla</li>
<li>blabla</li>
</ul>
<p>some text</p>

So the whole unordered list is collapse with an UA with javascript enabled, and a button is inserted to toggle the collapse. If an UA has no javascript, nothing happen, the xhtml code stays clean.

I'm sure it's quite simple but...

Anyone got an idea?

Jeu de rôle en ligne sur table virtuelle ⁂ Shadowrun France ⁂ Chez Blacky

Jérémie's Website

  • From: Ottawa, Canada
  • Registered: 2006-09-05
  • Posts: 308

Re: Javascript html collapse?

<h3 id="topH">some header</h3>
<ul id="plom" class="plom">
<li id="plom1">blabla</li>
<li id="plom2">blabla</li>
</ul>
<p id="bottomP">some text</p>
<p><a href="javascript:swap('topH');">swapH</a></p>
<script language="javascript"><!--
function swap(id) {
  var toswap = document.getObjectById(id);
  if (toswap.style.display != 'hidden')
  { toswap.style.display = 'hidden' }
  else
  { toswap.style.display = 'block' }
}
--></script>

Not sure if it's block or hidden, just do some searching for the tags on the css display tag. This jscript is murder when used on tables though, in IE, firefox and opera you tend to get a table that grows in an ugly way when using this on a tr or a td.

echo "deadram"; echo; fortune;
  • From: France
  • Registered: 2004-11-06
  • Posts: 695

Re: Javascript html collapse?

Not exactly what I was looking for, but I will look into it, thanks.

Jeu de rôle en ligne sur table virtuelle ⁂ Shadowrun France ⁂ Chez Blacky

Jérémie's Website

  • From: Ottawa, Canada
  • Registered: 2006-09-05
  • Posts: 308

Re: Javascript html collapse?

function insertHtmlButton (id) {
  var addafter = document.getObjectById(id);
  addafter.innerHTML = addafter.innerHTML + '<a href="javascript:toswap(\'plom2\');">Hide/Unhide blabla</a>';
}

That will insert code after said id. I always use IDs but I think there's a way to access classes. Keep in mind the page has to "exist" before the function is called. If you call this code in the header (before the body and the id in question is parsed), then nothing will happend.

echo "deadram"; echo; fortune;
  • From: France
  • Registered: 2004-11-06
  • Posts: 695

Re: Javascript html collapse?

Thanks for the parsing order note, I can call it at the end, not an issue. Mostly, I wanted (if possible) to have one script that effects everything I want, without calling it each time (hence not bloating my html code). And thx for the code.

Jeu de rôle en ligne sur table virtuelle ⁂ Shadowrun France ⁂ Chez Blacky

Jérémie's Website