Show/Hide Span On The Same Spot

I am using jQuery to show or hide a span. But I want the

to appear in the same place as the link I click. The current code actually shows the

tags on the le

Solution 1:

this can be your HTML part:

<a href="#" class="show_hide" style="position: relative;">Japan</a>
<span class="slidingDiv" style="position: absolute; left: 0;">
    <img src="02-1 ImageFiles/01 Japan.JPG" style="width: 235px; height: 245px;" />
    <a href="#" class="show_hide_close">Close</a>
</span>
is made up of islands, regions, prefectures (government districts), cities, and surrounding communities. The main island, Honshu, has thirty-four prefectures making up five regions. The
<a class="show_hide" href="#" style="position: relative;">T&#197;hoku Region</a>
<span class="slidingDiv" style="position: absolute; left: 0;">
    <img src="02-1 ImageFiles/02 TohokuRegion.JPG" style="width: 217px; height: 236px;" />
    <a href="#" class="show_hide_close">Close</a>
</span>

and this can be your script part:

<script type="text/javascript">
    $(document).ready(function () {
    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function () {
        var el = $(this);
        var slidingDiv = el.find("span.slidingDiv");
        if (slidingDiv.length > 0) {
            slidingDiv.slideToggle(function () { el.after(slidingDiv); });
        }
        else {
            slidingDiv = el.next("span.slidingDiv");
            el.append(slidingDiv);
            slidingDiv.slideToggle();
        }
        return false;
    });
    $('.show_hide_close').click(function () {
        $(this).parent().parent("a.show_hide").click();
        return false;
    });
});

Explanation:

• the script will append the span to the anchor on click and will move it back to its original place on closing. the reason is that you cannot wrap a block (here is the span) in an anchor tag in the html code, so we will do it at run-time. and we should wrap it because we need to show the span below the anchor tag.

• span containing the img and close button should have absolute position

• anchor which will be clicked should have relative position so browser can calculate the position of the span from the parent anchor, so it will be now below the link

• I generalized anchor and span classes, so you can use it with only one script block

• different class has been assigned to the close button, so clicking it will click the parent anchor

Solution 2:

Remove the div and Set the span to display: block

<a href="#" class="show_hide">Japan</a>
<a href="#" class="show_hide">Close</a>
<span class="slidingDiv">
    <img src="02-1 ImageFiles/01 Japan.JPG" style="width:235px; height:245px;" />    
</span>

span
{
   display: block;
}​

Check Fiddle

Share