javascript changing button id between two states - which way is best

Question

So I have a button like this....

<a id="fullcollapse" class="btn btn-lg btn-primary" href="#" role="button">Collapse menu &laquo;</a>

basically I want to change the id of the above onclick to "baseexpand" and when the next onclick happens to revert to the original id="fullcollapse"

I appreciate this is probably easy for most and have looked at documentation, examples on everything from Jquery to if else statements... I am interested in how others would approach this one. Jquery would be preferable as the id's relate to that.

Possible Duplicate: http://stackoverflow.com/questions/347798/changing-an-elements-id-with-jquery — David C, May 21 '15 at 18:20
if you really have **"looked at documentation, examples on everything from Jquery to if else statements..."**, then it would have been easy for you too. — Banana, May 21 '15 at 18:21
I am not asking the question because i can't do it (as written above) I am just interested in what other people think is "the best" way .... mainly because there are so many different ways of achieving the desired result thanks — havingagoatit, May 21 '15 at 18:22
as far as I can see from your link sharkbyte that example changes the id ONCE ONLY ... I think , apologies for caps — havingagoatit, May 21 '15 at 18:24
@havingagoatit not really, there is only one way of achieving it. checking for the id and changing it, as simple as that. that being said, i wouldnt recommend on changing the id at all. better set id to something static and add a class which you will toggle on click. — Banana, May 21 '15 at 18:26
right , so what your saying is do the same thing but focus on class changes instead ? — havingagoatit, May 21 '15 at 18:28
@havingagoatit yes. an id attribute is something to identify the element by. if you change it, it might cause confusion elsewhere in the code. — Banana, May 21 '15 at 18:30
@havingagoatit, yes Banana is right, jquery provides very nice support for adding or removing classes, http://www.w3schools.com/jquery/jquery_css_classes.asp, are you having difficulty with linking the function for adjusting classes to the onclick event? — David C, May 21 '15 at 18:31
@Banana thanks that was the kind of answer I was looking for... it's more valuable for me to get a perspective of experience rather than the final answer, cutting corners is not my thing — havingagoatit, May 21 '15 at 18:32

Banana · Answer 1 · 2015-05-21T18:45:52.037

As i said earlier, you should leave the ID as is, and toggle a class on click. changing the id might cause confusion elsewhere in the code.

using jQuery it is quite very simple to achieve, and with addition of the :after pseudo selector, you can even alter the link's text:

$(function() {
  $("#menuButton").click(function() {
    $(this).toggleClass("fullcollapse baseexpand");
  });
});

.fullcollapse {
  color: green;
}
.fullcollapse:after {
  content: 'Collapse menu <<';
}
.baseexpand {
  color: red;
}
.baseexpand:after {
  content: 'Expand menu >>';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="menuButton" class="btn btn-lg btn-primary fullcollapse" href="#" role="button"></a>

Samir Das · Answer 2 · 2015-05-21T18:36:35.757

1

you can try this:

$('a#fullcollapse').click(function(){
     $(this).attr('id',$(this).attr('id')=='fullcollapse'?'baseexpand':'fullcollapse');
});

JSfiddle: http://jsfiddle.net/samirkumardas/od2murdk/

edited May 21 '15 at 18:36

answered May 21 '15 at 18:31

Samir Das

1,878
12
20

When you change the id to baseexpand, it will no longer work, since you are only targeting the old ID, see my lengthy answer – Dendromaniac May 21 '15 at 18:32
Other than that, you have a great Idea there, and TBH it's much more clean than my example, however mine is more 'human-readable', and understanable to a beginner, nevertheless +1 – Dendromaniac May 21 '15 at 18:33
@Dendromaniac it should work. Check http://jsfiddle.net/samirkumardas/od2murdk/ – Samir Das May 21 '15 at 18:36
Maybe I am wrong, only I thought that it attatched it to the ID, rather than the entity of the element. Sorry about my stupidity. – Dendromaniac May 21 '15 at 18:39

score 0 · Accepted Answer · answered May 21 '15 at 18:28

0

$(function() {

  $( '#fullcollapse, #baseexpand' ).click(function() {
    if ( $( this ).attr('id') === 'fullcollapse' ) {
      $( this ).attr('id', 'baseexpand');
    } else {
      $( this ).attr('id', 'fullcollapse');
    }
  });

});

This code is untested, so there are no guarantees that it will work.

answered May 21 '15 at 18:28

Dendromaniac

378
1
14

no problem thanks anyway I will look into it as well as using classes instead of id's hopefully an amalgamation of both ways – havingagoatit May 21 '15 at 18:33
I recommend using classes, if you want I can edit the answer and add a method using classes? – Dendromaniac May 21 '15 at 18:34

javascript changing button id between two states - which way is best

3 Answers3