RE: [jquery-ui] can I put this in a .each loop?

I find hide() and show() to work better.  That way you don't have to figure
out whether an item is visible.  If an item is already hidden and you call
hide() nothing really happens, it just stays hidden.

Instead of calling the click function based on ID, assign a class to all
buttons, and determine the id of which was clicked using $(this)

That is assuming your html is structured this way

<div id="button_container">
        <div id="scale" class="button">
                I'm the scale button
        </div>
        <div id="info" class="button">
                I'm the info button
        </div>
        <div id="save" class="button">
                I'm the save button
        </div>
</div>
<div id="fade_divs">
        <div id="scale_div" class="fadeOrShow">
                I'm the scale info div
        </div>
        <div id="info_div" class="fadeOrShow">
                I'm the info div
        </div>
        <div id="save_div" class="fadeOrShow">
                I'm the save info div
        </div>
</div>

Your code would be something like this

$(".button").click(function(){
        var id = $(this).attr("id");
        $("#fade_divs .fadeOrShow").each(function(){
                if($(this).attr("id") == "#"+id+"_div"){
                        $("#"+id+"_div").show(200);
                }
                else{
                        $("#"+id+"_div").hide(200);                     
                }
        });
});

Scott


-----Original Message-----
From: Kory [mailto:[email protected]] 
Sent: Thursday, December 03, 2009 6:51 PM
To: jQuery UI
Subject: [jquery-ui] can I put this in a .each loop?

Hi All,

Im trying to build a menu system and each button I add Im having to
add more and more code eg:

    $("#scaleButton").click(function(){
        $("#scaleDiv").fadeToggle(200) ;
                if($('#infoDiv').is(':visible')){
                        $("#infoDiv").fadeToggle(100) ;
                }
                if($('#saveDiv').is(':visible')){
                        $("#saveDiv").fadeToggle(100) ;
                }
    });
    $("#infoButton").click(function(){
        $("#infoDiv").fadeToggle(200) ;
                if($('#resizerDiv').is(':visible')){
                        $("#resizerDiv").fadeToggle(100) ;
                }
                if($('#saveDiv').is(':visible')){
                        $("#saveDiv").fadeToggle(100);
                }
    });
    $("#saveButton").click(function(){
        $("#saveDiv").fadeToggle(200) ;
                if($('#resizerDiv').is(':visible')){
                        $("#resizerDiv").fadeToggle(100) ;
                }
                if($('#infoDiv').is(':visible')){
                        $("#infoDiv").fadeToggle(100) ;
                }
    });

//

jQuery.fn.fadeToggle = function(speed, easing, callback) {
   return this.animate({opacity: 'toggle'}, speed, easing, callback);
};

so basically I have three buttons that open a div and hide the other
two, how can I put this in a loop so I dont have to keep adding if
statements?

Thanks

--

You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en.




--

You received this message because you are subscribed to the Google Groups 
"jQuery UI" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/jquery-ui?hl=en.