CODEWITHSUNDEEP
jquerycss
Joe M.
Joe M.

Reputation: 1054

$('#id').toggle() is changing style="display:none" to style="" instead of the desired style="display:inline"

I have:

<a id = "button" style="display:inline"></a>
<a id = "buttonPressed" style="display:none"></a>

And I'm using

$('#button, #buttonPressed').click(function(event) {
    $('#button, #buttonPressed').toggle();
    //Do other stuff
})

The "display:inline" button is getting changed to "display:none" as desired, but the "display:none" button is changing to style="" instead of the desired "display:inline".

How do I address this?

Upvotes: 0

Views: 3082

Answers (3)

Ram
Ram

Reputation: 144699

you can try toggleClass():

.hidden {
   display: none
}


<a id="button">click1</a>
<a id="buttonPressed" class="hidden">click2</a>


$('#button, #buttonPressed').click(function(event) {
    $('#button, #buttonPressed').toggleClass('hidden');
})

Demo

Upvotes: 0

Dmase05
Dmase05

Reputation: 1089

This works fine in a jsfiddle

So maybe there is some other conflicting code on your page?

Upvotes: 0

recursive
recursive

Reputation: 86124

Add a class to those tags. Create a css rule that enforces the inline display in the rule.

Upvotes: 1

Related Questions