Show/Hide Divs by name in jQuery


I have the following JavaScript at the end of the body of my HTML:

$(document).ready(function() {
    $("a").click(function(event) {
        var real_div=div_to_show.split('-');
        var display_div=real_div[0];
        var elementPos=$("#"+div_to_show).offset();
        $('#board-right div').hide(); 
        $("#" + display_div).css('margin-top',top_pos); 
        $("#" + display_div).show(); 

And here is the HTML that it is supposed to manipulate:

<div id="board-left">
<div id="board-names">
    <a id="marci-link">Marci Weisler</a><br />
    <a id="nicholas-link">Nicholas Rey</a><br />
</div><!-- #board-left -->

<div id="board-right">
    <div id="marci" style="display:none;">
        Marci Weisler is an accomplished...
<div id="nicholas" style="display:none;">
        Nicholas Rey is a French-born...
</div><!-- board-right -->

So, the code should get the div name from the clicked link, remove the "-link" portion, and then show the appropriate div. Currently nothing is happening when I click the link. As I’m writing this, I am wondering if it is a CSS issue? Any ideas?

By the way, there is a link in the document to jQuery 1.3.


if you check,

you will find that the top pos is negative.. if u correct that as u require it will work

PS: try using jsfiddle while posting your questions so that people can work on your code and give faster answers… Most prb, you will find the answer yourself 😀

Answered By – Pramod Pallath Vasudevan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published