Drupal: jquery and panel page issues

Question

What the heck have i done?

Could some tell me what is happening with my site please? I'm re-learning drupal, css and jquery - doing all as the same time is probably not the best idea, but I am stuck for now.

this is my test: http://surety.lfwebz.com/ click on the home3 tab scroll to bottom of page

I am working with panels so the home page is a panel page, the slideshow is in a mini panel, scroller in another mini panel and text beneath the scroller is in another mini panel and all have been placed in the panel page.

Click on the bulleted text "What is Supplimental Insurance?" and note how the scroller text background color changes - the only thing that should change is the background color of the text and paragraph to the right of it

Click on the bulleted text "Do I really need Supplimental Insurance?" now note how the entire page changes, slideshow, scroller - again the only thing that should change is the background color of the text and paragraph to the right of it

Here is in a nutshell [snippet of the code]what the jquery does for all the bullets - click list item, change background color of list item, background-color corresponding paragraph, reset bkgd-color of previous selections

jQuery(document).ready(function(){
holdLinks1 = 'li:contains("What is Supplemental Insur")';

 jQuery(holdLinks1)
            .click(function(){
                jQuery(this).css('background-color', '#C2C2C2');
                jQuery('.views-row-first').show().css('background-color', '#C2C2C2');
                jQuery('li:contains("Do I really need")').css('background-color', '#e4e4e4');
                jQuery('li:contains("What happens when I have")').css('background-color', '#e4e4e4');
                jQuery('li:contains("How do I get supple")').css('background-color', '#e4e4e4');
                jQuery('.views-row-2, .views-row-3, .views-row-4').hide();
            });
});

What have I done wrong here?

Answer 1

As soon as I hit the "Post" button, it saw it - for those who are learning - my issue is, I am referencing a class that is also in various other DOM objects within my page.

For example, I only referenced .views-row-2 when I should have referenced [.views-row.views-row-1.views-row-odd.views-row-first] so I can zero in on that one particular element.