Question

I have a page that has 7 image boxes, these boxes are alert boxes for our customers agents for any type of alerts being sent out. I have them all set as a link, when clicked the box turns from orange to blue and an information box is opened next to it, each image has its own info box. I have it partially working but it is not function how I want. I need it so if box1 is opened and the user clicks box2 the box1 should revert back to orange and its info box needs to close so that box2’s info box can populate the space. Right now the image boxes stay blue when you click on other boxes and the code I have to close the info boxes is bugging out if you click off another image box. Here is part of my code and my HTML:
(Update) Here is a jsbin link of my example as it should be working. However, the click event is not working on my system, its not even trying to scroll to the top of teh page which normally happens when the trigger breaks but the href=# is there. Here is my new code:) JSBin

  //JS
  $(document).ready(function () {

        function assignClickHandlerFor(boxNum) {

            $('#a' + boxNum).click(function (evt) {

                // returning false at the end implictly does these two lines. 
                evt.preventDefault();
                evt.stopPropagation();

                var $aBox = $(evt.currentTarget); // points to the  element 
              (ie, the link) clicked. 

                // locate the div that has both the `.active` class and the `.alertBox2` class
                var $prevAlert = $('.alertBox2.active');
                $prevAlert.find('.blue').hide();
                $prevAlert.find('.orange').show();
                $prevAlert.removeClass('active');

                $('.alertDetails').hide();


                $abox.find('.blue').show();
                $abox.find('.orange').hide();
                $abox.addClass('active');

                // show the required alert.
                $('#d' + boxNum).show();
            });

        }

        var i;

        for (i = 1; i <= 7; i++) {
            assignClickHandlerFor('Box' + i);
        }

    });
  //CSS
      .alertBox2
  {
      float:left; display:block; 
   }
   .alertDetails
   {
     display:none; background-color:#fff; width:250px; height:585px; float:left;                             position:relative; left:5px; top:8px; 
      }

    //HTML 
               <div><a href="#" id="aBox1" class="alertBox2" >
                    <span class="infoBox orange">
                        <img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
                    </span>
                    <span class="infoBox blue" style="display: none;">
                        <img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
                    </span>
                </a>
            </div> 
            <div><a href="#" id="aBox2" class="alertBox2">
                    <span class="infoBox orange">
                        <img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
                    </span>
                    <span class="infoBox blue" style="display: none;">
                        <img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
                    </span>
                </a></div>                
            <div><a href="#" id="aBox3" class="alertBox2">
                    <span class="infoBox orange">
                        <img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
                    </span>
                    <span class="infoBox blue" style="display: none;">
                        <img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
                    </span>
                </a></div>                     
        </div>
        <p id="alertDP">Click on any Alert to the left to see details</p>

        <div class="alertDetails" id="dBox1">
                Box1
        </div>
         <div class="alertDetails" id="dBox2">
                Box2
        </div>
         <div class="alertDetails" id="dBox3">
                Box3
        </div>

Answer 1

Edit: A link demonstrating my understanding of your issue. http://jsbin.com/ecelil/1/edit

A few observations, clicking on any one aBox only toggles its own infoBox. In the click handler for aBox2 you seem to have noticed that and tried to fix it by passing three infobox selectors to jQuery. However jQuery doesn’t work that way. It accepts only one selector. That selector can however match those three elements.

Replace the first line of each of the three aBox click handlers with $('.infoBox1, .infoBox2, .infoBox3').toggle();

As for the code being too long, well, for loops, variables and css class selectors are your friends 🙂

$(document).ready(function () {

    function assignClickHandlerFor(boxNum) {

        $('#a' + boxNum).click(function (evt) {

            // returning false at the end implictly does these two lines. 
            evt.preventDefault();
            evt.stopPropagation(); 

            var $aBox = $(evt.currentTarget); // points to the  element (ie, the link) clicked. 

            // locate the div that has both the `.active` class and the `.alertBox2` class
            var $prevAlert = $('.alertBox2.active'); 
            $prevAlert.find('.blue').hide();
            $prevAlert.find('.orange').show();
            $prevAlert.removeClass('active');

            $('.alertDetails').hide();


            $aBox.find('.blue').show();
            $aBox.find('.orange').hide();
            $aBox.addClass('active');

            // show the required alert.
            $('#d' + boxNum).show();
        });

    };

    var i;

    for (i = 1; i <= 7; i++) {
        assignClickHandlerFor('Box'+i);
    }

});

// css

.blue-info-box {
    background-image: url('Images/blue_alert_box.jpg');
}

.orange-info-box {
    background-image: url('Images/orange_alert_box.jpg');
}

// html

<div>
    <a href="#" id="aBox1" class="alertBox2" >
        <span class="infoBox orange">
            <img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
        </span>
        <span class="infoBox blue" style="display: none;">
            <img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
        </span>
    </a>
</div> 
<div>
    <a href="#" id="aBox2" class="alertBox2">
        <span class="infoBox orange">
            <img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
        </span>
        <span class="infoBox blue" style="display: none;">
            <img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
        </span>
    </a>
</div>
<div>
    <a href="#" id="aBox3" class="alertBox2">
        <span class="infoBox orange">
            <img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
        </span>
        <span class="infoBox blue" style="display: none;">
            <img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
        </span>
    </a>
</div>

<div class="alertDetails" id="dBox1">
        Box1
</div>
 <div class="alertDetails" id="dBox2">
        Box2
</div>
 <div class="alertDetails" id="dBox3">
        Box3
</div>