Need help simplifying jQuery code

Question

This is my HTML code with the active class displaying what is clicked:

<div class="care_planning_lft">
    <ul>
        <li><a id="push-1" class="active">Care Planning</a></li>
        <li><a id="push-2">Care Teams</a></li>
        <li><a id="push-3">Care Coordination</a></li>
        <li><a id="push-4" class="padd">Secure, electronic<br>patient messaging</a></li>
        <li><a id="push-5" class="padd">Patient health<br>data &amp; reports</a></li>
        <li><a id="push-6">Patient Health alerts</a></li> 
        <li class="last"><a id="push-7" class="padd">EHR system<br>integration</a></li>
    </ul>
</div>
<div id="pull-1" class="care_planning_rht active">
    <?php
        $page_id = 1161; $page_data = get_post( $page_id );
        echo apply_filters('the_content', $page_data->post_content);
    ?>
</div>
<div class="care_planning_rht" id="pull-2">
    <?php
        $page_id = 1162; $page_data = get_post( $page_id );
        echo apply_filters('the_content', $page_data->post_content);
    ?>
</div>
<div class="care_planning_rht" id="pull-3">
    <?php
        $page_id = 1163; $page_data = get_post( $page_id );
        echo apply_filters('the_content', $page_data->post_content);
    ?>
</div>
<div class="care_planning_rht" id="pull-4">
    <?php
        $page_id = 1164; $page_data = get_post( $page_id );
        echo apply_filters('the_content', $page_data->post_content);
    ?>
</div>
<div class="care_planning_rht" id="pull-5">
    <?php
        $page_id = 1165; $page_data = get_post( $page_id );
        echo apply_filters('the_content', $page_data->post_content);
    ?>
</div>
<div class="care_planning_rht" id="pull-6">
    <?php
        $page_id = 1166; $page_data = get_post( $page_id );
        echo apply_filters('the_content', $page_data->post_content);
    ?>
</div>
<div class="care_planning_rht" id="pull-7">
    <?php
        $page_id = 1167; $page_data = get_post( $page_id );
        echo apply_filters('the_content', $page_data->post_content);
    ?>
</div>

This is my jQuery code just for push-1 and pull-1:

$(document).ready(function(){
    $("#push-1").click(function () {
        $("#push-1").addClass("active");
        $("#pull-1").addClass("active");
        $("#push-2").removeClass("active");
        $("#pull-2").removeClass("active");
        $("#push-3").removeClass("active");
        $("#pull-3").removeClass("active");
        $("#push-4").removeClass("active");
        $("#pull-4").removeClass("active");
        $("#push-5").removeClass("active");
        $("#pull-5").removeClass("active");
        $("#push-6").removeClass("active");
        $("#pull-6").removeClass("active");
        $("#push-7").removeClass("active");
        $("#pull-7").removeClass("active");
    });
});

Right now, I have that jQuery pretty much repeated for 1-7, just changing what IDs get the active class. Can someone tell me, or point me in the right direction, how to simplify this? It seems very redundant to me but I'm not good enough at this yet.

Answer 1

Try

jQuery(function ($) {
    var $els = $('.care_planning_rht');
    var $as = $('.care_planning_lft a').click(function () {
        $(this).addClass('active');
        $as.not(this).removeClass('active');

        var target = '#pull-' + this.id.match(/\d+$/)[0];
        $els.not(target).removeClass('active');
        $(target).addClass('active');
    })
})

Demo: Fiddle

Answer 2

simply use like this

$("[id^=push],[id^=pull]").click(function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
});

This will bind click events to all the elements which starts with id push and pull. You can remove the active class from all the elements using the single line,$(".active").removeClass("active");

Answer 3

You can use toggleClass¹.:

e.g.:

html:

<ul>
    <li><a id="push-1" class="active toggle">Care Planning</a></li>
    <li><a id="push-2" class="toggle">Care Teams</a></li>
    <li><a id="push-3" class="toggle">Care Coordination</a></li>
    <li><a id="push-4" class="toggle padd">Secure, electronic<br>patient messaging</a></li>
    <li><a id="push-5" class="toggle padd">Patient health<br>data &amp; reports</a></li>
    <li><a id="push-6">Patient Health alerts</a></li> 
    <li class="last"><a id="push-7" class="padd">EHR system<br>integration</a></li>
</ul>

<div id="pull-1" class="care_planning_rht toggle active">
...
</div>
...

javascript:

$('a.toggle').click(function() {
    $('.toggle').toggleClass('active');
});

^{1Assuming that all the elements have a common selector -- In my example I use a class, but you could use more advanced selectors as some of the others are suggesting to remove the necessity to add another class to the HTML.}

Answer 4

You could add a class to them all and call the class instead of the id or you could do this:

$("#push-2,#pull-2,#push-3,#pull-3,#push-4,#pull-4,#push-5,#pull-5,#push-6,#pull-6,#push-7,#pull-7").removeClass("active");