Multifunction toggle function in javascript

Question

I'm using following JavaScript code to slideUp and slideDown different divs based on theirs link options:

Javascript / jQuery:

function toggleDiv(option) {
    $('.content-box').slideUp();
    $('#' + option).slideDown(300);
}

HTML:

<li><a class="active" href="javascript:toggleDiv('toggle1')">Toggle 1</a></li>
<li><a href="javascript:toggleDiv('toggle2')">Toggle 2</a></li>

The whole code works perfectly, however what I would like to do is that the class="active" switches to the actual link that user has pressed. I heard about some attribute method or something similiar bur have no ideea how to proceed. So I would appriciate any help from you.

By the way, why is the code working smoothly in Firefox/Chrome but is laggy in Safari?

Check the JSFiddle here: https://jsfiddle.net/3vfwdL34/ For some reason it won't work in JSFiddle but the same code works fine in a normal .html file.

Milind Anantwar · Accepted Answer · 2015-04-18 12:31:12Z

3

You need to define the function before using them in inline event. wrap the code in head section and everything should work fine for you. and for adding the class active, pass current clicked object to method and add class to it.

<head>
  <script>
    function toggleDiv(option,that) {
       $('.active').removeClass('active');
       $(that).addClass('active');
       $('.content-box').slideUp();
       $('#' + option).slideDown(300);
    }
  </script>
</head>

However you can use jquery to simplfy the task:

$('li a').click(function(){
   $('.active').not(this).removeClass('active');
   $(this).addClass('active');
   $('.content-box').slideUp();
   $('#toggle'+($(this).parent().index()+1)).slideDown(300);
});

Demo

edited Apr 18, 2015 at 12:31

answered Apr 18, 2015 at 12:20

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NewToJS Over a year ago

I think the OP had formatting issues when posting this question. I don't think this is the issue as the javascript/jQuery wouldn't work at all and the OP has clearly pointing out "The whole code works perfectly".

dsharew · Accepted Answer · 2015-04-18 12:33:54Z

0

Try like this:

function toggleDiv(option) {
    //move the class 'active' to the pressed li
    ("a").removeClass("active")
    $('#' + option).addClass("active")

    $('.content-box').slideUp();
    $('#' + option).slideDown(300);
}

edited Apr 18, 2015 at 12:33

answered Apr 18, 2015 at 12:21

dsharew

10.7k6 gold badges55 silver badges76 bronze badges

1 Comment

Montague Over a year ago

Your code works but not entirely, I changed li to a and it removed the class, but it did not add a new class to the new link

Collectives™ on Stack Overflow

Multifunction toggle function in javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related