Comments on: Newbie Seeks Javascript

Question: Newbie Seeks Javascript

jimmyjimjim — Sat, 29 Mar 2008 17:06:40 -0800

I want to build a web page with expandable sections of text which default to not being expanded. Unfortunately, I'm a total javascript newbie. The way they did it here is pretty close to what I'd want (scroll to "anatomical focus"): http://www.yogajournal.com/poses/863 ....Is it possible (or, for that matter, ethical) to somehow grab the javascript they used? Alternatively, are there generic freeware scripts anywhere that do something similar? If there were any such repository with a variety of javascripts that do this slightly different ways, even better. If it's newbie friendly, even better still! Thanks!

By: belladonna

belladonna — Sat, 29 Mar 2008 17:18:59 -0800

What you want is an accordion script. There are lots of free ones on that page. They'll all have instructions, I think.

By: jimmyjimjim

jimmyjimjim — Sat, 29 Mar 2008 17:33:32 -0800

Wow, thanks. Funny how in this age of web search, knowing the name of something is the most critical thing. We're in the Rumpelstiltskin Era....

By: jimmyjimjim

jimmyjimjim — Sat, 29 Mar 2008 17:35:32 -0800

A good link (for anyone reading along): http://aariadne.com/accordion

By: jimmyjimjim

jimmyjimjim — Sat, 29 Mar 2008 17:46:01 -0800

Hmm. The problem is that just about all these scripts hide any shown text when showing other text. I want users to be able to show/hide different sections at their whim, or be able to simply hit a "show all" button (as in the example URL).

By: jimmyjimjim

jimmyjimjim — Sat, 29 Mar 2008 17:48:09 -0800

also, I'm hoping for plain javascript, not requiring other frameworks or libraries.

By: belladonna

belladonna — Sat, 29 Mar 2008 18:47:44 -0800

Like one of these? one | two

I'm not sure how those compare to the script yogajournal is using. You could compare them if you want. (Look for "/* show and hide elements on poses page */" to find the relevant part.) I don't recommend just copying their code, but you can certainly learn from it. :)

By: cschneid

cschneid — Sat, 29 Mar 2008 18:49:49 -0800

If you don't mind not having fancy animation, this is an increibly easy script to write.

You have a link which has an onclick event. That would look like



[a href="#" onclick="show('div1');"]Show the hidden div![/a]

[div id='div1' style='display: none']My hidden text[/div]

The components there are the link. It doesn't go anywhere, but it does call the "show" function, with the name of the div it should show.

The div1 div is hidden by default (display: none), so it starts out invisible.

The last component is the show() function.



[script type="text/javascript"]

function show(id) {

  var elem = document.getElementById(id);

  if (! elem) return;

  elem.style.display = 'block';

}

[/script]

That doesn't toggle, or change any other elements (like the arrow in the example site). I can add those for you if you like, but it would probably work best over email so I can type script code without messing up the formatting. Also note, it very well might not work as typed, as I just did that off the top of my head.

By: anomie

anomie — Sat, 29 Mar 2008 19:07:05 -0800

Why not use a library? This is the spot where jQuery shines:

first the base html:



<div class="outer">

  <h3> Section Heading </h3>

  <a href="#" class="expand-link">

    <img src="expand.gif"/>

  </a>

  <div class="hidden-text>

    put stuff here you want to hide

  </div>

</div>

and the javascript:



<script type="text/javascript">

$(function(){

  $('a.expand-link').click(function(){

    $(this).next('div.hidden-text').toggle();

  }

}

</script>

This doesn't change the image though, mefimail me if you're interested.

By: anomie

anomie — Sat, 29 Mar 2008 19:09:26 -0800



<div class="hidden-text>

should be



<div class="hidden-text">

By: mmoncur

mmoncur — Sat, 29 Mar 2008 22:44:25 -0800

Here's a Super simple example from a book I wrote. You have my permission to steal it.