JavaScript frameworks

[marisa1981]

Hi,

I am using prototype to toggle some content on my web page. It works fine, but I have multiple divs on my FAQ page which I want to toggle. Does anyone know how I can achieve this without assigning iduvidual id's to each div and duplicating all the javascript? Here is what I have so far:


<script type="text/javascript">
Event.observe(window, 'load', function() {
$('featurebox').hide();
$('featurebox-listen').writeAttribute('src', '../../img/branding/btn-next.gif');
Event.observe('featurebox-listen', 'click', function(){
$('featurebox').toggle();
if($('featurebox').visible()){
$('featurebox-listen').writeAttribute('src', '../../branding/chevron-down.gif');
} else {
$('featurebox-listen').writeAttribute('src', '../../img/branding/btn-next.gif');
}
});
});
</script>
<p><img id="featurebox-listen" alt="toggler"/></p>

<div class="featurebox" id="featurebox">
<ul>
<li><strong>Step 1</strong><br />some content.</li>
<li><strong>Step 2</strong><br />some content.</li>
<li><strong>Step 3</strong><br />some content.</li>
<li><strong>Step 4</strong><br />some content.</li>
<li><strong>Step 5</strong><br />some content.</li>
</ul>
<p>some content</p>
</div>

[ohgod]

instead of hiding everything on load just set their style to "display: none". that way it's hidden on load and you don't have to use an event observer. also, you may as well just put your img src in instead of doing that on load too. it'll be faster.

if you're wanting to associate two elements like you're doing with the img and the div, an id is an easy way to do it. you don't HAVE to... but it's a bit more work not to (you could walk the dom, but it limits you)

for the moment let's say you give all those divs and id, and the associated img that same id + "listen". so if you have a div with id="div1" you'd have an img with id="div1-listen". again, skip the event listener for simplicity and just add onclick="toggler(this);" to the imgs.

function toggler(what){
wl = what +'listen';
$(what).toggle();
if($(what).visible()){
$(wl).writeAttribute('src', '../../branding/chevron-down.gif');
} else {
$(wl).writeAttribute('src', '../../img/branding/btn-next.gif');
}
}