Question

I have some divs which are structured like this:

<div>
    <div><a>more Info</a></div>
    <div><a>more segments</a></div>
</div>
<div>
    <div><a>more Info</a></div>
</div>
<div>
    <div><a>more Info</a></div>
    <div><a>more segments</a></div>
</div>
.......

These divs are being generated dynamically. Some divs contain 2 hyperlinks (like the 1st div), some contain only one hyperlink (like the 2nd div).

1. When I click on moreInfo link, it has to display one div which contains some information. When I click on another link, the previously displayed div should be hidden and open appropriate div associated with that link.
2. When I click on moresegments link, it has to display number of segments and all moreInfo links should be disabled. Each segment consists of moreInfo link(segment consists the code just like 2nd div). After click on moreInfo link in each segment. It has to behave like in point1.

   This is my sample code http://jsfiddle.net/H5R53/16/

   In the above code, when I click on moreInfo link it displays one div which contains some information .Upto this it’s working fine. Now my problem is, when I click on the same link again it doesn’t show the Information again. And also when I click on moresegments link the moreInfo links( which are not child of moresegments link) should be disable and all opened div’s( which are opened when click on moreInfo link) should be close. Anyone please help me.

Answer 1

If I understand your issue correctly, you want to hide the div #moreInfo if the user wants to open another one.

If so,

JQUERY

if ($('#moreInfo').size()==1) {
    $('#moreInfo').remove();
}

YOUR JQUERY WITH THAT CONTROL ADDED

$('.moreInfLink').live('click',function(){
    if ($('#moreInfo').size()==1) {
        $('#moreInfo').remove();
    }
   $(this).after("<div id='moreInfo'>sdasdad<br/>sdasdad<br/>sdasdad<br/><div id='close'>close</div></div>");
});

And your Fiddle Updated!