Removing a CSS onClick

Question

I'm trying to make my link toggle from left to right. I'm using the code below;

HTML:

$forum_threads = '
    <div id="latest_threads_link">
        <a href="javascript:void(0)" id="latest_threads_click"><img src="images/kalachi/latest_threads.png" alt="Latest Threads" title="Click Here to see latest threads of this section."></a>
        <table border="0" cellspacing="'.$theme['borderwidth'].'" cellpadding="'.$theme['tablespace'].'" class="tborder" style="display: none;" id="latest_threads_show">
            '.$forum_threads_bit.'
        </table>
    </div>
';

jQuery:

jQuery(document).ready(function($){
  $('a[id^="latest_threads_click"]').on('click', function (e){
        e.preventDefault();
        $('#latest_threads_show').slideToggle();
        $('#latest_threads_click').addClass('latest_threads_link_active');
    });
});

CSS:

#latest_threads_link{
    left:0;
    position:fixed;
    bottom:150px;
}

.latest_threads_link_active{
    left:200px;
    position:fixed;
    bottom:150px;
}

I want to make it so when #latest_threads_link is clicked then #latest_threads_show toggleout from left to right and on second click on #latest_threads_link then the table #latest_threads_show hides.

It actually does with my code but the issue is the #latest_threads_link remains on 200px away from left even on second click. I want #latest_threads_link to go left: 0 on second click.

Please help!!

can you add your generated html ?then we can test it locally — Awlad Liton
– Awlad Liton, Commented Jan 10, 2014 at 14:08
Sad to see none of the answers pointing out $('#latest_threads_click').slideToggle() is just $(this).slideToggle() and $('a[id^="latest_threads_click"]') is faster as just $('#latest_threads_click') (assuming there aren't other id's starting with latest_threads_click) — andyb
– andyb, Commented Jan 10, 2014 at 15:12

Xyz · Accepted Answer · 2020-09-25 08:16:14Z

2

Your problem is that you're adding the class on each click. Instead, change this line:

$('#latest_threads_click').addClass('latest_threads_link_active');

to this:

$('#latest_threads_click').toggleClass('latest_threads_link_active');

edited Sep 25, 2020 at 8:16

Xyz

6,0416 gold badges43 silver badges60 bronze badges

answered Jan 10, 2014 at 14:09

knrz

1,8211 gold badge12 silver badges15 bronze badges

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

Comments

Awlad Liton · Accepted Answer · 2014-01-10 14:14:58Z

1

use toggleClass :

Demo : http://jsfiddle.net/5Y9mG/6/

jQuery(document).ready(function($){
  $('a[id^="latest_threads_click"]').on('click', function (e){
        e.preventDefault();
        $('#latest_threads_show').slideToggle();
        $('#latest_threads_click').toggleClass('latest_threads_link_active');
    });
});

answered Jan 10, 2014 at 14:14

Awlad Liton

9,3513 gold badges30 silver badges53 bronze badges

Comments

Abraham Hamidi · Accepted Answer · 2014-01-10 14:10:37Z

0

Replace

$('#latest_threads_show').slideToggle();

with

$('#latest_threads_show').slideToggle(400, function()
{
    if($(this).is(":hidden"))
    {
        $(this).css({'left':'0px;'});
    }else
    {
        $(this).css({'left':'200px;'});
    }
});

It changes the left from 0px to 200px and repeat, etc (toggling).

answered Jan 10, 2014 at 14:10

Abraham Hamidi

13.9k3 gold badges39 silver badges52 bronze badges

Collectives™ on Stack Overflow

Removing a CSS onClick

HTML:

jQuery:

CSS:

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML:

jQuery:

CSS:

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related