Question

I can’t find a post specifically for this (although I’m sure it exists and I’m failing to find it.)

I have it so an image .regularpic toggles a whole specific div #title to appear upon clicking. Is there a more efficient way of having my code reset the other classes without all of those lines?

THE HTML IS THIS :

<img src="images/wordpress.png" alt="" class="regularpic first" />
<img src="images/google.png" alt="" class="regularpic second"  />
<img src="images/html5.png" alt=""  class="regularpic third" />
<img src="images/adobe.png" alt=""  class="regularpic fourth" />
<img src="images/jquery.png" alt=""  class="regularpic fifth" />

THE JQUERY IS THIS :

$(function() {
$(".first").click(
    function() {
    $(".second, .third, .fourth, .fifth").stop().animate({opacity:0.4 }, 500);
    $(".first").stop().animate({opacity:1.0 }, 500);
    $("#title2, #title3, #title4, #title5").stop()
                                           .animate({opacity:0.0, 
                                                     backgroundColor: '#fff',
                                                     color: '#fff',width: 580,
                                                     height:50}, 200);
        $("#title1").stop().animate({opacity:1.0, 
                                     backgroundColor: '#fff', 
                                     color: '#000', width: 580, 
                                     height: 300 }, 600);
                });
});
$(function() {
$(".first").click(
    function() {
    $(".first, .third, .fourth, .fifth").stop().animate({opacity:0.4 }, 500);
    $(".second").stop().animate({opacity:1.0 }, 500);
    $("#title1, #title3, #title4, #title5").stop()
                                           .animate({opacity:0.0, 
                                                     backgroundColor: '#fff',
                                                     color: '#fff',width: 580,
                                                     height:50}, 200);
        $("#title2").stop().animate({opacity:1.0, 
                                     backgroundColor: '#fff', 
                                     color: '#000', width: 580, 
                                     height: 300 }, 600);
                });
});

There has to be a more efficient way no?

Answer 1

This sould do it for you :

HTML :

<img src="src" onClick="mypic('title1')" class="regularpic title1" />
<img src="src" onClick="mypic('title2')" class="regularpic title2" />

    ...

<img src="src" onClick="mypic('title5')" class="regularpic title5" />

JQuery :

var current = null;
function mypic(id) {
    $('.regularpic').stop().animate({opacity:1.0 }, 500, function(){
        $('.title').stop().animate({ opacity:0.0, 
                                     color: '#fff', 
                                     height:50}, 500, function(){
            if(current !== id){
                current = id; 
                $('.'+id).stop().animate({opacity:0.7 }, 500);
                $("#"+id).stop().animate({opacity:1.0, 
                                          color: '#000', 
                                          height: 300 }, 500);

            }
        });
    });
};

DEMO :

http://jsfiddle.net/uEjct/4/

Hope it helps.

EDIT :

You need to add a common class to :

#title1,#title2,#title3,#title4,#title5

In the example : class="title"