toggle css as well as show/hide jquery


Tags: jquery,css,toggle

Problem :

I've got this bit of code working so that it toggles a show/hide and also changes the CSS elements...

I would like it to change back the :hover state with the toggle. Is that possible?

$("article").click(function () {
    $(".folder-items",this).slideToggle("slow");
    $("article:hover").css({
       background : 'none',
       border : '1px solid #C7C6C7'
    });
 });

How do I do this? What do I need to change?

I've basically hashed this code together from the docs and online resources. So not sure what to do to get it working right. I'm a little new to jquery.



Solution :

Is that what you want?

var origBg = $("article:hover").css('background');
var origBorder =  $("article:hover").css('border');

$("article").click(function () {
    $(".folder-items",this).slideToggle("slow");
    if ($("article:hover").css('border')==origBorder)
    {
        $("article:hover").css({
            background : 'none',
            border : '1px solid #C7C6C7'
        });
    }
    else
    {
        $("article:hover").css({
            background : origBg,
            border : origBorder
        });
    }

});

    CSS Howto..

    How to prevent HTML code in a literal inside a DIV from affecting outer page styles

    How to make a div 100% accross

    How to implement a finished coded html/css page into CMS [closed]

    How to wrap div containing spans containing the text to be wrapped?

    How to use Jekyll baseurl in css files

    simple css issue - how to change anchor inside li if li:hover

    How to align css class using bootstrap

    How to make background-image size height always equal what the image height needs to be for full width image?

    How to perform --include-css when using the Jekyll stylus plugin

    How to hide this element using CSS or JQuery

    How to add two images one in the right and other in the left side of the input textbox?

    After adding a “current” class to an active item in a menu using jQuery, how can css changes be made to the container of the item?

    IOs Cordova long-press shows text-select magnifying glass even with text-selection disabled, how to remove?

    css - how to hide href link nested inside a div?

    How to vertically align

    tag in navbar

    CSS How to animate a transition from opacity 0 upon hover

    How to put images to the right and text to the left in css

    jQuery select box Show/hide div

    How to reflow DIV boxes in CSS to stick to bottom right?

    How To Highlight Show Active Tab In A Navbar-Fixed-Top

    Is there a CSS style guide for large existing projects. Or how could I optimize the css for a large project [closed]

    Add CSS Style to textarea that shows XML

    How do you find the largest font size that won't break a given text?

    How to add border inner side of image using CSS

    How to change text colour on a child structure HTML5

    How to format CSS for 8.5x11 inch printed pages

    How to make an inline-block box stick to the top? [duplicate]

    How to remove or reset CSS style using JS?

    How do I add another css to Bootstrap?

    how to use css to display multiple posts in inline-block like google+