How to change expand div after click and collapse it after another click?


Tags: javascript,jquery,html,css

Problem :

I have an explandable/collapsible element that I created using Simple-expand (A jQuery plug-in to expand/collapse elements).

What I want to do is change the css of the element when user clicks on it, expanding it ,and change it again when user clicks on it again ,collapsing it.

Problem is, I don't know how to do that. I know how to change class on click, but how can I change the CSS after the user "unclicked" this tab and it shrinked up?

EDIT: Thanks to George for correcting me on what I wanted to do, to be more clear. I was a bit tired, so I needed it fast. I know this is really bad excuse, but I fully understand and respect you guys, who gave me negative feedback.

Basically what I needed, is:

  • There's 6 different divs;
  • When you click on one div, it will expand;
  • When you click on another div, it will check if ANY OF THESE divs are EXPANDED, if YES - close (collapse) them, and open that div which I clicked on.

For that simple task (it's really simple, it's just me being stupid) I needed to use jQuery this statement and a few if's.

I found a solution after 15 mins after publishing this post here and I wanted to delete it, unfortunately, I can't, because it has answers.

Thanks to everyone who tried to help me, I appreciate your help.

Cheers!



Solution :

Just use a class for when the element is expanded and toggleClass() to toggle the class on click

$( ".your_element" ).click(function() {
  $( this ).toggleClass( "expanded" );
});

    CSS Howto..

    How to prevent Twitter Bootstrap changing margins as width of page is extended

    How can I solve this styling issues?

    Having css issues div ahref showing up behind others, domino effect

    How to get a CSS selector in PHP?

    How to position div which contains font-awesome icons to centre of another div?

    How to pull out CSS attributes from inline styles with BeautifulSoup

    joomla: how is the CSS generated?

    How to center text in my div

    Print CSS: How do I open a new tab of the current page and append CSS?

    CSS Chevron Showing Unwanted Rectangle

    How to concat js/css files and replace in html using gulp?

    How do you extend a Django project root HTML file in project apps?

    how can i use css selector to give style only to a first div between two divs of the same kind?

    How to have 3 sections in a row

    How to animate sections in pure CSS when scrolling the page?

    HTML/CSS - how to align boxes / divs [closed]

    How to match element containing another element?

    How to have video faded when paused - HTML

    How to move an image upwards in html/css

    HTML - How do css/javascript files get loaded?

    How to change label color of disabled checkbox in ASP.NET?

    How can I select this element?

    How to horizontally center two divs within a header div?

    How do I get rid of the big margin between my labels and the input fields?

    How to keep responsiveness while expanding div background height in CSS?

    How to load .css file from parent directory with .htaccess rule?

    How can I correctly type css float?

    how to prevent link padding during hover from extending paragraph padding

    How to make a sidebar that stretches to the page length?

    How to get css background color on tag to span entire row