Question

I’m trying to toggle the contents of a span tag on and off using a jquery function.

I’m using a span tag as I want the contents to be inline with the rest of the data on the line when it gets toggled. On page load the image I want to toggle appears inline and in the correct position, however upon toggling the image re appears on the screen on a line below the rest of the contents of the line its supposed to be on.

Any suggestions?

Thanks in advance.

TheCodez:

JQuery:

$(document).ready(function() {
        $('#btnHide').click(function() {
            $('.iotoggle').toggle(0);
        });
        });

HTML(XML/XSL):

<xsl:choose>
        <xsl:when test="io=1">
        <span class="iotoggle">
            <img src="../images/io/input.png" width="4" height="17" border="0" align="absmiddle" alt="Input"/>
        </span>
        </xsl:when>
        <xsl:when test="io=2">
        <span class="iotoggle">
            <img src="../images/io/output.png" width="4" height="17" border="0" align="absmiddle" alt="Output"/>
        </span>
        </xsl:when>
    </xsl:choose>

Answer 1

The code you posted confuses me a bit. I changed your jQuery a bit so items hide or show based on the click of the button. (Right now, it looks like you are just hiding based on the button click.) So, now the jQuery looks like this:

$(document).ready(function() {
    $('#btnHide').toggle(function() {
        $('.iotoggle').hide();
    }, function() {
        $('.iotoggle').show();
    });
});

Everything stays inline now. You can see an example here. Click the button to toggle the “images” (which are just the alt text right now as I don’t have access to your actual images). Does this fix your problem?