jQuery Forum

The idea is to create four triggers (four div's) to display four areas with content related to that trigger. For example imagine the first trigger as "about us", if you click on it an area with the story of the company must appear.

However I am working with background designs in the triggers, the first trigger must be "on" when the page load, so the first trigger has an arrow (as a background image desing) pointing to the area below. When you click the next trigger, the background of the first trigger must return to the "close-background-design" and the background of the clicked one must change to the arrow pointing to the new content that shows.

Seems to be easy, however it's very tricky to me.

All four divs (triggers) has a class:

1. .pestanas {
2.       other styles...
   
3.       background-image: url(../images_b/pestana_ultimate.png);
   
4. }
   

This is the design of the non-arrows.

Every four triggers have their own ID's with the idea of controling when must appear the arrow in the click event.

1. #pestana_a {
2.  styles...
   
3. }
4. #pestana_b {
5.  styles...
   
6. }
7. #pestana_c {
8.  styles...
   
9. }
10. #pestana_d {
11.  styles...
    
12. }
    

This is the Jquery:

1.     $('.pest_area').hide(); //four areas with four contents must be hide at loading
2.     $('#pest_a').show(); //the first area must be shown at loading.
3.     $('#pestana_a').css('background-image', 'url(images_b/pestana_arrow.png)'); //the first arrow must be shown at loading in the first trigger
4.     $('.pestanas').click(function() {
5.          var clicked=$(this).attr('id').split("_")[1]; //pestana_ + [a]
6.          var idObj=$(this).attr('id');
7.          $(idObj).css('background-image', 'url(images_b/pestana_arrow.png)'); //this is not working
   
8.          var areaID='#pest_' + clicked;
9.          $('.pest_area').hide();
10.          $(areaID).show();
11. });