Home/ Questions/Q 7413995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T06:59:11+00:00

I have a question regarding jQuery. I have multiple images that are, in essence,

  • 0

I have a question regarding jQuery. I have multiple images that are, in essence, the same. The difference is that one of the images (let’s call it the ‘active’ image) is a used as a side navigation bar which triggers “animated collapse” of the multiple DIVs in the Div to the right. For this item which is clicked (and triggers the animated collapse) I am wanting to change the background image which has been defined in CSS.

I’d love it if I could get the “active” background/class to be displayed on the one, while the “inactive” icons revert to the “inactive status” onclick. As you select different items in the nav bar, each one changes it’s background/class to the active designation, along with triggering the animated collapse effect.

Right now only the animatedcollapse event works, though the inactive status

Here’s the HTML that I’m working with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="animatedcollapse.js"></script>
<script type="text/javascript">
animatedcollapse.addDiv('one', 'fade=1,speed=400,group=content,hide=0')
animatedcollapse.addDiv('two', 'fade=1,speed=400,group=content,hide=1')
animatedcollapse.addDiv('three', 'fade=1,speed=400,group=content,hide=1')
animatedcollapse.init()
</script>
<script type="text/javascript">
$('a.toggle').click(function () {
  $('a.toggle.select').removeClass('active');
  $(this).addClass('active');
});
</script>
<style type="text/css">
a.toggle {
    background-image: url(images/contentnav_inactive.png);
    width: 275px;
    height: 41px;
    background-position: left top;
    background-repeat: no-repeat;
    float: left;
    margin-top: 5px;
    margin-bottom: 5px;
}
a.toggle.active {
    background-image: url(images/contentnav_active.png);
    width: 275px;
    height: 41px;
    background-position: left top;
    background-repeat: no-repeat;
    float: left;
    margin-top: 5px;
    margin-bottom: 5px;
}
a.contentheader {
    height: 25px;
}
</style>
</head>
<body>
<div class="content">
        <div class="contentnav">
        <a class="contentheader" href="javascript:animatedcollapse.toggle('one')" id="toggle1_TGLink"><img src="images/contnav_header_business.png" width="252" height="25" style="margin: 2px 4px" /></a>
        <a class="toggle" id="toggle2_TGLink" href="javascript:animatedcollapse.toggle('two')"><img src="images/contentnav_text_busauto.png" width="269" height="41" /></a>
        <a class="toggle" href="javascript:animatedcollapse.toggle('three')" id="toggle3_TGLink" ><img src="images/contentnav_text_bop.png" width="269" height="41" /></a>
</div>
      <div class="toggle></div>
      <div class="contenttext">
            <div id="one" class="TG_hidden"><h1>Business Insurance Overview</h1>
                <hr />
       </div>
            <div id="two" class="TG_hidden"><h1>Business Auto</h1>
                <hr />

            </div>
            <div id="three" class="TG_hidden"><h1>Business Owners Insurance (BOP)</h1>
            <hr />

        </div>
      </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this code

    $('a.toggle').click(function () {
    $('a.toggle').removeClass('active');
    $(this).addClass('active');
});

    I’ve just removed .select class

    “animatedcollapse.js” line 107, you should remove “@” so this line should have been

    var $allcontrols = $('[rel^="collapse-"], [rel^="expand-"], [rel^="toggle-"]')

    also you should wrap your selector in $(document).ready as

    $(document).ready(function () {
    $('a.toggle').click(function () {
        alert("active");
        $('a.toggle').removeClass('active');
        $(this).addClass('active');
    });
});
    • 0