当单击特定链接时，在该位置显示div，否则在jquery中隐藏其他人

Question

In this page i have done table listing and each tr have two link are :- 1) Adult and 2) Child When Click on particular link(for Adult or child) show the div at that position and all other position's div are hide. if next or any other link is click then hide previous link div.

I want to show the hidden div(as i given the hidden properties in div) at when click on particular link ------------Here are the HTML :: ------------

<td>
    <div class="tab-inner">
        <p><span><strong>Space : <?php echo $row->space; ?></strong></span>
        </p>
        <p><a href="javascript:;" name="allocation" id="Adult_Allocation_<?php echo $j;?>" rel="#apop1_1" rev="Adult Allocation">Adult $<?php echo $row->adultPrice; ?></a>

            <!-- <div id="SpanAdultAllot"></div>-->
        </p>
        <div style="display:none;" class="adult-wrapper">
            <div class="adult-box">
                <div class="adultborder">
                    <div id="adultallot" class="adult-msg">Adult Allocation</div> <span class="adult-select-no"></span>
                </div><span class="adultarrow"></span>

                <label id="adult" class="adultselect">Adult :</label>
                <select class="selectorbox" id="adultselect" name="adult">
                    <option value="">--</option>
                    <?php for($i=1; $i<=$row->space; $i++) { ?>
                    <option value="<?php if($i==$row->space) echo " selected='selected' "; ?>">
                        <?php echo $i;?>
                    </option>
                    <?php } ?>
                </select>   <strong></strong> 
            </div>
        </div>
        <?php if($row->childPrice
        <>'0'){ ?>
            <p><a href="javascript:;" name="allocation" id="Adult_Allocation_<?php echo $j;?>" rel="#cpop1_1" rev="Child Allocation">Child $<?php echo $row->childPrice; ?></a>
            </p>
            <!--<div id="SpanChildAllot"></div>-->
            <?php } ?>
    </div>
</td>

----------Here JS code::-----------

$('a[name="allocation"]').live("click", function () {
    $(this).parent().next('.adult-wrapper').show();
    $('.adult-select-no').live("click", function () {
        $(this).closest('.tab-inner').find('.adult-wrapper').hide();
    });
});

Answer 1

Add / include jquery-1.9.0.min.js file.

Create one div to show:

<div id="details_link" style="">
  <a href="javascript:void(0);" onclick="javascript:$('#details_div').show();  $('#details_link').hide();">Show Link </a>
</div>

Create another div to hide:

<div id="details_div" style="display:none;">Test show and hide div
  <a href="javascript:void(0);" onclick="javascript:$('#details_div').hide();  $('#details_link').show();">Hide Link </a>
</div>

Some tips for avoiding errors when using different browsers:

• Don't write Javascript code in the href attribute, always put it in onclick .

• To hide div , write in its style display:none or block .

• Don't use visibility=hidden .