[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Open Close button

Posted on 2009-04-30
9
Medium Priority
?
345 Views
Last Modified: 2012-06-27
Hello,

So, I have a span which I am using to show/hide all answers. Here is my span:

<span class="openAllButton">SHOW ALL ANSWERS</span>

Here is my jquery

 // open all questions
    $('.openAllButton').click(function() {
        $('div.accordionContent').slideDown('normal');
        $('div.accordionButton').parent().addClass('active');
        $(this).removeClass('openAllButton');
        $(this).addClass('closeAllButton');
        $(this).text('CLOSE ALL ANSWERS');
    });
     // close all questions
    $('.closeAllButton').click(function() {
        $('div.accordionContent').slideUp('normal');
        $('div.accordionButton').parent().removeClass('active');
        $(this).removeClass('closeAllButton');
        $(this).addClass('openAllButton');
        $(this).text('SHOW ALL ANSWERS');
    });

This jquery is inside a "$(document).ready(function() {"


See, how I am opening all the answers then removing the openAllButton class and adding the closeAllButton class.

It works to open all the answers and then adds the closeAllButton class. But it doesnt work when I click the button again to hide all the answers. I'm guessing it is because I have the closeAllButton in a document ready and then changing the class is not being linked to the jquery... can anyone suggest a fix for this?

Thanks
Steggs
0
Comment
Question by:Mark Steggles
  • 5
  • 4
9 Comments
 
LVL 5

Expert Comment

by:cdaugustin
ID: 24277005
Hi,

you need to do something like in the attached snipet (the snipet is posted only to show you how to resolve the problem its not meant to be copy/paste)(mainly because i dont have my editor handy and im doing it here). so basically after you remove the class and add change it to a new class you need to attach the jquery behaviour to the new ones two (in your script they dont happen because the linking is done only once on document load and you need to do it each time you remove/add the classes).

The below solution is just a quick solution to illustrate the issue, you should make it look more pretty :)
 // open all questions
    $('.openAllButton').click(function() {
        $('div.accordionContent').slideDown('normal');
        $('div.accordionButton').parent().addClass('active');
        $(this).removeClass('openAllButton');
        $(this).addClass('closeAllButton');
        $(this).text('CLOSE ALL ANSWERS');
 
    $('.closeAllButton').click(function() {
        $('div.accordionContent').slideUp('normal');
        $('div.accordionButton').parent().removeClass('active');
        $(this).removeClass('closeAllButton');
        $(this).addClass('openAllButton');
        $(this).text('SHOW ALL ANSWERS');
    });
 
    });
     // close all questions
    $('.closeAllButton').click(function() {
        $('div.accordionContent').slideUp('normal');
        $('div.accordionButton').parent().removeClass('active');
        $(this).removeClass('closeAllButton');
        $(this).addClass('openAllButton');
        $(this).text('SHOW ALL ANSWERS');
 
   $('.openAllButton').click(function() {
        $('div.accordionContent').slideDown('normal');
        $('div.accordionButton').parent().addClass('active');
        $(this).removeClass('openAllButton');
        $(this).addClass('closeAllButton');
        $(this).text('CLOSE ALL ANSWERS');
    });
 
    });

Open in new window

0
 
LVL 30

Author Comment

by:Mark Steggles
ID: 24280366
If you could post the code to fix that would be helpful
0
 
LVL 5

Expert Comment

by:cdaugustin
ID: 24280756
to fix what ?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Author Comment

by:Mark Steggles
ID: 24280787
"The below solution is just a quick solution to illustrate the issue, you should make it look more pretty :)"

I dont know what solution you mean... please post the code to fix the problem.
0
 
LVL 5

Expert Comment

by:cdaugustin
ID: 24281846
the attached code on that comment fixes your problem. you could make it look more pretty if you want
0
 
LVL 30

Author Comment

by:Mark Steggles
ID: 24281877
nope, it doesnt fix the problem.
0
 
LVL 30

Author Comment

by:Mark Steggles
ID: 24282109
Are u going to be able to show me how to fix this or do I need to ask for more attention from other experts?
0
 
LVL 5

Accepted Solution

by:
cdaugustin earned 2000 total points
ID: 24282212
hi,

Ive opened the IDE to see what was the problem with the above and it was indeed wrong because the function was already bound to the DOM elem and it didnt got rewriten by the new event. either way try the attached snippet should be exactly what you want (without the class removal and re adding).
    $('.openAllButton').toggle(
    	function()
    	{
	        $('div.accordionContent').slideDown('normal');
	        $('div.accordionButton').parent().addClass('active');
	        $(this).text('CLOSE ALL ANSWERS');
    	},
  
    	
    	function()
    	{
	        $('div.accordionContent').slideUp('normal');
	        $('div.accordionButton').parent().removeClass('active');
	        $(this).text('SHOW ALL ANSWERS');
    	}
  );

Open in new window

0
 
LVL 30

Author Comment

by:Mark Steggles
ID: 24282259
aha toggle.. forgot about.

Thanks that works :D points on route
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month19 days, 19 hours left to enroll

872 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