Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 295
  • Last Modified:

JQuery Toggle-How do I tell if all toggled elements are hidden?

Hello Experts,

I have a (hopefully) fairly simple question. Below i have a simple JQuery toggle menu for a recipe display which actually functions quite nicely for what we need, and ties in with a print stylesheet. We had this page done and the client added an advertisement to the side of the page, "recipe-call". Since all recipes have images that pop up on the same side, we need to hide the "recipe-call" div when someone clicks on a recipe title to display it. We have that function done just fine. As it stands, "recipe-call" is absolutely positioned and everything is fine with it, but what we need to do is get it to show up again when all of the recipes are collapsed. How would we test to see if all of the DIV elements are collapsed? Would this be a simple IF statement? I've tried a few things and so far it's been a no-go.

<script type="text/javascript">
         $(document).ready(function() {
  			$('div#recipe-show> div').hide();  
  			$('div#recipe-show> h2').click(function() {
				$('div#recipe-call').hide();
    			$(this).next('div').slideToggle('slow')
    			.siblings('div:visible').slideUp('slow');
  			});
		});
</script>

<div id="recipe-call">
        <img src="images/picture.jpg" width="259" height="196" />
        
        <div id="callout">
        <h4>Download award-winning <br>
        recipes here!</h4>
        </div>
</div>


<div id="recipe-show">
<h2>Title one</h2>
<div class="print-div">Content one</div>
<h2>Title two</h2>
<div class="print-div">Content two</div>
etc...
</div>

Open in new window


I'm a beginner with JQuery but not a beginner with development/code. Thanks in advance for your thoughts!
0
Jen0910
Asked:
Jen0910
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
var all_Toggled_Element_Is_Hidden_FLAG = ( $("h2","div#recipe-show").next("div:hidden").length == $("h2","div#recipe-show").length ); // true or false
0
 
Jen0910Author Commented:
Thanks leakim971! Unfortunately, I'm having no luck. Would it work something like this:

<script type="text/javascript">
		var all_Toggled_Element_Is_Hidden_FLAG = ( $("h2","div#recipe-show").next("div:hidden").length == $("h2","div#recipe-show").length ); // true or false
		
         $(document).ready(function() {
  			$('div#recipe-show> div').hide();  
  			$('div#recipe-show> h2').click(function() {
				$('div#recipe-call').hide();
    			$(this).next('div').slideToggle('slow')
    			.siblings('div:visible').slideUp('slow');
  			});
			
			if(all_Toggled_Element_Is_Hidden_FLAG === true ) {
    			$('div#recipe-call').show();
				}
		});
</script>

Open in new window


Or am I implementing wrong?
0
 
leakim971PluritechnicianCommented:
the flag did not update magically each time you change/toggle something on the page :)

firstly you need to use it ONCe document is ready
secondly you need to understand toogle take time to change state (hidden or visible) of the element
the value of the flag need to be updated before toggle or at the end

before just put it before
at the end, use the callback function of the slideToggle

slideToggle('slow', function() { if(all_Toggled_Element_Is_Hidden_FLAG === true ) {
                      $('div#recipe-call').show();
                        }
}
);

http://api.jquery.com/slideToggle/
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now