jquery - How to successively change a class on click -

suppose have list of div:

<div id='d-1' class='hidden'>this one<br />     <button onclick='next();'>next</button> </div> <div id='d-2' class='show'>second 1 <br />     <button onclick='next();'>next</button> </div> <div id='d-2' class='hidden'>third one<br />     <button onclick='next();'>next</button> </div> <div id='d-2' class='hidden'>fouth 1 <br />     <button onclick='next();'>next</button> </div> 

and css:

.show {   color: red; }  .hidden {   color: green; }     

how can change classes successively？

i try by:

$(function(){  function next(){  $(this).removeclass('show').addclass('hidden');  } }); 

any help? here code injsfiddle:

edit

updated here

your question has several aspects try adress each 1 one. if use chrome dev tools can see console reports uncaught referenceerror: next not defined. of error move function next() outside of document ready. this

// not work $( document ).ready(function() {         function next(){          $(this).removeclass('show').addclass('hidden');     } }); 

becomes this

function next(){     $(this).removeclass('show').addclass('hidden'); }  $( document ).ready(function() {         // next moved outside    }); 

as can see not need document.ready anymore.

the next error can see on chrome dev-tools uncaught typeerror: object [object object] has no method 'removeclass'. reason method (as others have said) removeclass

changing error , 1 addclass added console.log('this', this); find out object this points

function next(){     console.log('this', this);     $(this).removeclass('show').addclass('hidden'); } 

now can see in chrome dev tools this points object window. have reconsider how make sure next() points right object. pass id or in case jquery selector (# + id).

<div id='d-1' class='isactive'>first one<br />     <button onclick="next('#d-1');">next</button> </div> 

i changed class names based on understanding mean.

function next(jqselector){            $(jqselector).removeclass('isactive').addclass('ispassive'); } 

demo first part

no works first <div id='d-1' .... take look @ demo 1. assume want more. depends on mean. should click on button d1

• color d2 green , d1 red
• or should d1 made green , next div (d2) red.

option 1 make current active (red) others passive (green)

in demo under second headline button click makes parent div active (red-color) others passive

<div id='d-1' class='mydivs isactive'>first one<br />     <button onclick="makeactive('#d-1');">make active</button> </div> <div id='d-2' class='mydivs ispassive'>second one<br />     <button onclick='makeactive();'>make active</button> </div> 

and javascript

function makeactive(jqselector){      console.log('makeactive', jqselector, $(".mydivs"));     // set every element class .mydivs passive     $(".mydivs").removeclass('isactive').addclass('ispassive');       // set 1 element active        $(jqselector).removeclass('ispassive').addclass('isactive'); }