Solved

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

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

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 56

Expert Comment

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

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
alert on input text 2 23
href return to normal window 5 28
How Close unsubmited attempts 10 43
How do I Enable submit button only if listbox has items 4 29
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
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 if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:

756 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