Toggle CSS style on click

Question

Scratching my head over this for a while now I will lose hair soon.

I have a site here: http://ve.jago-staging.com/ I am trying to figure out how I can alter the code below so that when I click on featured posts the transition occurs same way, instead of just the round click links.

I've seen examples where I click on the element itself and it change style but not externally controlled.

round click still need to work

Thanks for the help

(function($) {
        $(document).ready( function() {
            $('.feature-slider a').click(function(e) {
                $('.featured-posts section.featured-post').css({
                    opacity: 0,
                    visibility: 'hidden'
                });
                $(this.hash).css({
                    opacity: 1,
                    visibility: 'visible'
                });
                $('.feature-slider a').removeClass('active');
                $(this).addClass('active');
                e.preventDefault();
            });
        });
    })(jQuery);

jsfiddle.net/shavindra/PJAc8 I've simplified the code hopefully its more clearer now? — MonteCristo
– MonteCristo, Commented Apr 27, 2012 at 14:57

paul_ngc · Accepted Answer · 2012-04-26 19:22:51Z

2

Do this:

$(document).ready( function() {
        $('.feature-slider a').click(function(e) {
            $('.featured-posts section.featured-post').toggleClass('your-extra-css');
        });
    });

And add the css stuff in your css:

.your-extra-css {
visibility:visible;
}

answered Apr 26, 2012 at 19:22

paul_ngc

1011 silver badge10 bronze badges

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

1 Comment

paul_ngc Over a year ago

You should not add the class 'your-extra-css' to the document already. jQuery does that for you after you click the h1 ;) When jQuery adds the class you tell with your css code what it should do. As long the class is not added the 'featured-post' class is hidden or not displayed. I've edited the code for you: jsfiddle.net/PJAc8/4

Collectives™ on Stack Overflow

Toggle CSS style on click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related