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:

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

Please help me fix this.

Code sample:

function bottom() {
    var value = $('#toggle').attr('value');
    $('#bottomtext1').toggle('slow');
    $('#bottomtext2').toggle('slow');
    
    if (value == 'rejt'){
        $('toggle').attr('value', 'mutat');
    }
    else if (value == 'mutat') {
        $('toggle').attr('value', 'rejt');
    }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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>

Answer

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: http://jsfiddle.net/T8aWV/1/
Fixed Fiddle: http://jsfiddle.net/T8aWV/

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)