Solved

counting visible / hidden elements

Posted on 2013-05-28
2
229 Views
Last Modified: 2013-05-28
for example when using the following code:

$("h3").click(function () {
        $(this).next("p").slideToggle("fast");
      
            hidden = $(this).parent().parent(".toggler").find("div > p:hidden").length;
            shown = $(this).parent().parent(".toggler").find("div > p:visible").length;
                console.log(hidden + ' : ' + shown);
});

<div class="toggler">
<a class="toggleall hand" onclick="return false;">Expand</a>
      <div>
            <h3 class="hand">Toggle 3</h3>
            <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
            </p>
      </div>
      <div>
            <h3 class="hand">Toggle 4</h3>
            <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
            ut neque.
            </p>
      </div>
      <div>
            <h3 class="hand">Toggle 5</h3>
            <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
            </p>
      </div>
</div>

problem:
there are 3 toggle areas
i'm outputting the number of hidden p's & visible p's to the console
it starts off correctly but then gets behind by 1
see if you see what I mean.

Question:
What am i doing wrong and or is that a better way to do this?
0
Comment
Question by:dgrafx
2 Comments
 
LVL 4

Accepted Solution

by:
Ahmed Hussein earned 500 total points
ID: 39202841
Do it that way, put the code inside a callback function for the slideToggle, so you make sure it's executed after the the slide action.

$("h3").click(function () {
        $(this).next("p").slideToggle("fast", function(){
	        hidden = $(this).parent().parent(".toggler").find("div > p:hidden").length;
            shown = $(this).parent().parent(".toggler").find("div > p:visible").length;
            console.log(hidden + ' : ' + shown);
        });
      
});

Open in new window

0
 
LVL 25

Author Closing Comment

by:dgrafx
ID: 39202860
thanks ...
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now