Newbie Seeks Javascript

March 29, 2008 5:06 PM

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!
posted by jimmyjimjim to Computers & Internet (10 answers total)

Best answer: What you want is an accordion script. There are lots of free ones on that page. They'll all have instructions, I think.
posted by belladonna at 5:18 PM on March 29, 2008 [2 favorites]

Response by poster: 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....
posted by jimmyjimjim at 5:33 PM on March 29, 2008 [3 favorites]

Response by poster: A good link (for anyone reading along): http://aariadne.com/accordion
posted by jimmyjimjim at 5:35 PM on March 29, 2008

Response by poster: 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).
posted by jimmyjimjim at 5:46 PM on March 29, 2008

Response by poster: also, I'm hoping for plain javascript, not requiring other frameworks or libraries.
posted by jimmyjimjim at 5:48 PM on March 29, 2008

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. :)
posted by belladonna at 6:47 PM on March 29, 2008

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.
posted by cschneid at 6:49 PM on March 29, 2008

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.
posted by anomie at 7:07 PM on March 29, 2008


<div class="hidden-text>
should be
<div class="hidden-text">

posted by anomie at 7:09 PM on March 29, 2008

Here's a Super simple example from a book I wrote. You have my permission to steal it.
posted by mmoncur at 10:44 PM on March 29, 2008