CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Paulius K.
Paulius K.

Reputation: 210

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

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:

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!

Upvotes: 0

Views: 5205

Answers (3)

George Pant
George Pant

Reputation: 2117

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" );
});

Upvotes: 4

Rick Bronger
Rick Bronger

Reputation: 330

fiddle Demo

CSS

.active {
    background-color: #CC0000;
    font-weight:bold;
    color:#FFFFFF;
}

jQuery

$('#button').click(function () {
    $("#colormethis").toggleClass('active');
});

Use class active than toggleClass using jQuery This how you change CSS. So try making it in your own code.

Upvotes: 1

Vadim
Vadim

Reputation: 68

You can use materialize css collapsible link

Upvotes: 0

Related Questions