Stuck on figuring out how to change multiple elements onclick

Stuck on figuring out how to change multiple elements onclick

I'm working on some jQuery and have gotten a bit stuck.  I'm quite the newbie with jQuery but loving it!  I'm attempting to change 2 elements on a page onclick.  I can change one, but haven't figured out how to change multiple elements.  Here's my code with comments afterwards:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Basic</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        //Default Action
        $(".tab_content").hide(); //Hide all tabs content
        $(".box_content").hide(); // Hide all boxes content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content
        $(".box_content:first").show(); //Show first box content

        //On Click Event ... this modifies the tab content
        $("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected li tab
            $(".tab_content").hide(); //Hide all tab content           
            var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active content
            return false;
        });
    });
    </script>
    </head>
    <body>
       
    <p class="view_items_title">View Content</p>
    <ul class="tabs">
    <li><a href="#tab0">Tab Content 1</a></li>
    <li><a href="#tab1">Tab Content 2</a></li>
    </ul>

    <div id="tab0" class="tab_content">
        <h2>Tab Content 1</h2>
        <p>Tab Content 1 and stuff.</p>
    </div>

    <div id="tab1" class="tab_content">
        <h2>Tab Content 2</h2>
        <p>Tab Content 2 and stuff.</p>
    </div>

    <br /><br />

    <div class="box_content">
    Another box with tab content 1
    </div>

    <div class="box_content">
    Another box with tab content 2
    </div>

    </body>
    </html>



























































So in the above example, when I click on "Tab Content 1" in the list, the content in the div with the class of "tab_content" and id of "tab2" fades in.  Same thing when I click on "Tab Content 2" in the list, the content in the div with the class of "tab_content" and id of "tab1" fades in.  I want to have the same effect with the content in the 2 divs that have the class of "box_content".  I played around with several different ways but kept running into walls.  Does anyone have any suggestions?  Thanks!