Solved

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

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

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 51

Expert Comment

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

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

705 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

19 Experts available now in Live!

Get 1:1 Help Now