Solved

jQuery .slideToggle() and .toggleClass() not working together

Posted on 2014-04-30
3
1,920 Views
Last Modified: 2014-05-01
I have the following script which is intended to open/close a specific div based on the id of the button/div pair. My issue is that on the first click the class 'pressed' is added, but the 'photoId' div isn't toggled unless you click a second time.

If you remove either the toggleClass or the slideToggle, each individual part works perfectly. How do I get these to work together in sync?

$(document).ready(function () {
	
    $("#contacts .photos button").click(function () {
	$(this).toggleClass("pressed");
	var photoId = $(this).attr("class").replace("bid", ".pid");	
       	$(photoId).slideToggle("600");
    });
	
});

Open in new window


<div id="contacts">
    <div class="photos">
        <div>
            <div class="photo pid-1">
                <img src="photo1" alt="photo1" />
            </div>
            <div class="button">
                <button class="bid-1"></button>
            </div>
        </div>                               	
    </div>
    <div class="photos">
        <div>
            <div class="photo pid-2">
                <img src="photo1" alt="photo1" />
            </div>
            <div class="button">
                <button class="bid-2"></button>
            </div>
        </div>                               	
    </div>
</div>

Open in new window

0
Comment
Question by:93jordanaj
  • 2
3 Comments
 
LVL 52

Accepted Solution

by:
Julian Hansen earned 350 total points
ID: 40032833
The problem is this line
$(this).toggleClass("pressed");
var photoId = $(this).attr("class").replace("bid", ".pid");	

Open in new window

When pressed is not added the first line adds pressed so now the class for the button is
bid-1 pressed

Open in new window


You are then replacing bid with pid to find the attached div and trying to find it based on the above which won't work because there is no element
pid-1 pressed

Open in new window

The next time around the pressed class is removed so it does find the div and hides it etc.
You could change the lines around but this would have the same effect.
To fix you would need to remove the pressed class from the photoId string. You could do it like this
<script type="text/javascript">
$(function() {
    $("#contacts .photos button").click(function () {
	    $(this).toggleClass("pressed");
	    var photoId = $(this).attr("class").replace('pressed', '').replace("bid", ".pid");			
        $(photoId).slideToggle("600");
    });
});
</script>

Open in new window

However my suggestion is to do as follows
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
    $("#contacts .photos button").click(function () {
      $(this).toggleClass("pressed");
      // Find the photoId based on the data-id of the button 
      // which we set to the matching class
      var photoId = $(this).data("id");

      // Fire the slide against the retrieved class.
      $('.'+ photoId).slideToggle("600");
    });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="contacts">
    <div class="photos">
        <div>
            <div class="photo pid-1">
                <img src="photo1" alt="photo1" />
            </div>
            <div class="button">
                <button class="bid-1" data-id="pid-1"></button>
            </div>
        </div>                                 
    </div>
    <div class="photos">
        <div>
            <div class="photo pid-2">
                <img src="photo1" alt="photo1" />
            </div>
            <div class="button">
                <button class="bid-2" data-id="pid-2"></button>
            </div>
        </div>                                 
    </div>
</div>
</body>
</html>

Open in new window

0
 
LVL 1

Author Closing Comment

by:93jordanaj
ID: 40034024
Wow, thanks Julian, this works perfectly. And even better, you've explained everything so I can learn rather than simply copy, I really appreciate it.

Alex
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 40034039
You are most welcome Alex - thanks for the points.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…

937 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

6 Experts available now in Live!

Get 1:1 Help Now