I'm relatively new to jQuery & Javascript  and was wondering if
someone could help me condense my code a little.

What I have going on is... multiple div's with different info in them
& an ordered list of links. Only one of the divs will display at a
time and they can be toggled through by clicking on the corresponding
link.

HTML:
<div id="branding">
<div id="one">
 <p>Lorem Ipsum One</p>
</div>

<div id="two">
 <p>Lorem Ipsum Two</p>
</div>

<div id="three">
 <p>Lorem Ipsum Thre</p>
</div>

<ol>
 <li><a href="/?brandingId=1">1</a></li>
 <li><a href="/?brandingId=2">2</a></li>
 <li><a href="/?brandingId=3">3</a></li>
</ol>
</div>

JQuery:
      $("#branding ol li:nth-child(1) a").click(function() {
                $("#branding div").attr('id', 'one');
        });

        $("#branding ol li:nth-child(2) a").click(function() {
                $("#branding div").attr('id', 'two');
        });

        $("#branding ol li:nth-child(3) a").click(function() {
                $("#branding div").attr('id', 'three');
        });

Here is a quick demo page...
http://demonstration.dev.matrixgroup.net/brad/toggle/

Thanks for any help,

brad

Reply via email to