Skip to content

jQuery toggle function disorts text

I have some functions to toggle 2 parts of an HTML if I click the ‘rejt‘ button. Normally it looks like this: Normal

But after using the button to toggle it back again, it gets disorted like this: Disorted

Please help me fix this.

Code sample:

function bottom() {
    var value = $('#toggle').attr('value');
    if (value == 'rejt'){
        $('toggle').attr('value', 'mutat');
    else if (value == 'mutat') {
        $('toggle').attr('value', 'rejt');
<script src=""></script>
<id id="bottomtext1" style="display:none;">stuff1</id>

<input type="button" value="rejt" id="toggle" onclick="bottom();">

<id id="bottomtext2" style="display:none;">stuff2</id>


First of all, what’s with the font and id tags? Not sure what jQuery is going to do when toggling a tag it knows nothing about (id).

More importantly, these id tags are set to display:inline-block after the toggle, such as:

<id id="bottomtext2" style="display:inline-block" />

That element is adjacent to <id id="bottomtext2" />, also set to inline-block. This would explain the side-by-side display.

Broken Fiddle:
Fixed Fiddle:

Get rid of the id tags and make them divs. This fixed the problem for me.

See also: “Periodic Table” of HTML 5 tags (and when to use them)