CODEWITHSUNDEEP
jquery
Liam
Liam

Reputation: 9855

Slide Toggle - jQuery

I've built a sliding DIV with a few anchors that when clicked I want to show their corresponding DIV.

When you click operations, however, it's a bit buggy. Surely there's a better way to do this? I dont think I've built it very well, so can anybody suggest impovements, or make it so that when one item is clicked the others are hidden?

At first I need the financial DIV showing which is providing to be a pain...

http://jsfiddle.net/MZNyC/

Upvotes: 0

Views: 348

Answers (4)

charlietfl
charlietfl

Reputation: 171700

There are simple ways to manage this with one handler for all links. All you need is a way to create relationship between links and content. Here is one approach by adding one attribute to the links. You then set some class name that defines only the current one to make it easy to slide it back up

HTML:

 <a class="finance-btn titlejob" href="#" data-class="finance">

JS:

$('.titlejob').click(function() {
    var newContent = $('.' + $(this).data('class'));;
    $('.content_active').removeClass('content_active').slideToggle("slow", function() {
        newContent.slideToggle("slow").addClass('content_active');
    });
return false;
});

Upvotes: 0

reach4thelasers
reach4thelasers

Reputation: 26909

http://jsfiddle.net/MZNyC/21/

Don't use toggle, call siblings.hide() on each panel switch.

Wrap the panels in a containing div (so Siblings().hide() only hides the other panels, not the header)

Upvotes: 0

t0nyh0
t0nyh0

Reputation: 680

I would suggest that you create a variable that would hold what is currently displayed. Upon clicking on a tab, it will hide the current one, show the new one, then set the new one as the current one.

I've modified your fiddle to demonstrate it: http://jsfiddle.net/t0nyh0/MZNyC/20/

Upvotes: 1

user1252306
user1252306

Reputation: 85

you can use the onClick() event in the buttons and use a function to tootle the buttons and reutilize it when the button is clicked. So if you add another button, pass the argument (wich button to do the "toggle") in the function.

Regards

Upvotes: 0

Related Questions