Show/Hide Divs by name in jQuery

Issue

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

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

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>
</div><!-- #board-left -->

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

Solution

if you check http://jsfiddle.net/pramodpv/YvYBD/,

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