Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    JavaScript frameworks

    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:

    Code:
    <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>
    Last edited by oracleguy; 02-19-2009 at 08:18 PM. Reason: Please use code tags in the future

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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.

    Code:
    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');
    }
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •