Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2014-04-30
3
Medium Priority
?
2,075 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 59

Accepted Solution

by:
Julian Hansen earned 1400 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 59

Expert Comment

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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

618 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