JavaScript Forum

**seannarae** · 05-17-2010, 02:03 PM

I'd like to make my jquery more efficient. Its basic show/hide of multiple levels of containers via an ID string that builds by appending unique strings

TOP LEVEL CONTAINERS
Clicking #by_date triggers show of #by_date_list
Clicking #by_pub triggers show of #by_pub_list
Clicking #by_type triggers show of #by_type_list

2ND LEVEL CONTAINERS
Clicking #by_date_2010 triggers show of #by_date_2010_list (example)

Right now, I'm explicity listing the IDs for each list container, even though the only difference is to append "_list" to the ID of the trigger. It works right now for these top-level LIST containers.

Is there a way to re-write the jquery actions so that the container that gets shown/hidden is simply to append "_list" to the ID of the trigger?

Like:
(this id + "_list").show();

The IDs for the 2nd level of containers will work the same. The ID to show/hide is simply to append "_list" to the trigger.

For example, the ID for: Articles by Date > 2010 > List will be #by_date_2010_list

Without a way to make the code more efficient, when i add the 2nd level of containers to show/hide, the jquery is going to get needlessly complex and hard to maintain.

Hope this is making sense. Thanks in advance for reading and hopefully making suggestions.

LIVE TEST PAGE:
http://bit.ly/cmRkiN

MY JQUERY

Code:

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $('.article_list').hide();

    $("#by_date").click(function() {
        $("#by_date_list").show();
        $("#by_pub_list").hide();
        $("#by_type_list").hide();
        $("#by_date").addClass('on');
        $("#by_pub").removeClass('on');
        $("#by_type").removeClass('on');

    })
    $("#by_pub").click(function() {
        $("#by_pub_list").show();
        $("#by_date_list").hide();
        $("#by_type_list").hide();
        $("#by_date").removeClass('on');
        $("#by_pub").addClass('on');
        $("#by_type").removeClass('on');
    })
    $("#by_type").click(function() {
        $("#by_type_list").show();
        $("#by_pub_list").hide();
        $("#by_date_list").hide();
        $("#by_date").removeClass('on');
        $("#by_pub").removeClass('on');
        $("#by_type").addClass('on');
    })

})
</script>

MY HTML

Code:

<div id="wrap">
    <h3 id="by_date">Articles by Date</h3>
    <div id="by_date_list" class="article_list">
        <p><a href="#" id="by_date_2010">2010</a></p>
        <p>2009</p>
        <p>2008</p>
        <p>2007</p>
    </div>

    <h3 id="by_pub">Articles by Publication</h3>
    <div id="by_pub_list" class="article_list">
        <p>Magazine 1</p>
        <p>Magazine 2</p>
        <p>Magazine 3</p>
    </div>

    <h3 id="by_type">Articles by Type</h3>
    <div id="by_type_list" class="article_list">
        <p>Columns & Briefs</p>
        <p>Features</p>
        <p>Exposes</p>
    </div>
</div>