Solved

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

Posted on 2014-04-30
3
1,952 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 55

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 55

Expert Comment

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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses how to create an extensible mechanism for linked drop downs.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

837 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