JQuery addclass to selected div remove class if another div is selected

Question

I m making a formbuilder  I would like to change the appearance of for example a heading div  When clicked it should get a border but when another dynamically generated div is clicked the class should be removed and the second clicked div has to get the  active class   How can I do this with generated divs   Anyway I found something that works but I still need the If another div is selected  previous div removeclass and selected div addclass  This works          Add Class      document  ready function            document   on   click     HeadingDiv   function         This   HeadingDiv  could be anything  I need something dynamic here                HeadingDiv   removeClass  active       This   HeadingDiv  could be anything  I need something dynamic here              this  addClass  active

User · Answer

This can be achived easily using two different ways     1 We can also do this by using addClass and removeClass of Jquery 2 Toggle class of jQuery    1 First Way      documnet ready function        dvId   click function          dvId   removeClass  active class or your class name which you want to    remove   addClass  active class or your class name which you want to add                    2  Second Way    i  Here we need to add the class which we want to show while page get loads  ii after clicking on div we we will toggle class i e  the class is added while loading page gets removed and class which we provide in toggleClss gets added      lt div id  dvId  class  ActiveClassname   gt   lt  div    documnet ready function        dvId   click function          dvId   toggleClass  ActiveClassname InActiveClassName                   Enjoy         If you any doubt free to ask any time

User · Answer

I had to transform the divs to list items otherwise all my divs would get that class and only the generated ones should get it Thanks everyone  I love this site and the helpful people on it      You can follow the newbie school project at http   low-budgetwebservice be project webbuilder html suggestions are always welcome     So this worked for me                      Add Class Heading                 document  ready function                    document   on   click    ul items li   function                      ul items li   removeClass  active                   this  addClass  active

User · Answer

You can use a single line to add and remove class on a div  Please remove a class first to add a new class      div   on  click  function         div   removeClass  active   addClass  active

User · Answer

It s all about the selector   You can change your code to be something like this    lt div class  formbuilder  gt       lt div class  active  gt Heading lt  div gt       lt div gt 1 lt  div gt       lt div gt 2 lt  div gt       lt div gt 3 lt  div gt       lt div gt 4 lt  div gt   lt  div gt    Then use this javascript     document  ready function              formbuilder div   on  click   function                  formbuilder div   removeClass  active              this  addClass  active                  The example in a working jsfiddle  See this api about the selector I used   http   api jquery com descendant-selector

User · Answer

Are you looking something like this short and effective   http   jsfiddle net XBfMV      div   on  click  function         div   removeClass  active        this  addClass  active          you can simply add a general class  active  for selected div  when a div is clicked  remove the  active  class  and add it to the clicked div

User · Answer

In this mode you can find all element which has class active and remove it  try this    document  ready function               this attr  id    click function                   document  find   active   removeClass  active               var DivId     this  attr  id               alert DivId                this  addClass  active

[jquery] JQuery addclass to selected div, remove class if another div is selected

Examples related to jquery

Examples related to css

Examples related to addclass

Examples related to removeclass