How to show inline help using simple css and jquery

I am designing a page with multiple help link. All link help will appear at the same location. Clicking on help link I want to display css popup

example I have two help context on the page with div tag

< div class="inlineExplaination" id="div1" >

<a href="#">Help 1</a>

<div class="content">

    <h3>This is title</h3>
    <div class="block">
        <h4>What is this4>
        <p>This is... </p>
    </div>
</div>

< div class="inlineExplaination" id="Div1" >

< a href="#"Help 2</a>

<div class="conten开发者_开发技巧t">
    <h3>
        This is title</h3>
    <div class="block">
        <h4>What is that?</h4>
        <p>That is... </p>
    </div>
</div>

my jquery looks like this

    $(document).ready(function () {
    $(".inlineExplaination").click(function () {
        var popID = $(this).attr('id'); 

        //Hide previous dialog
        $(".content").hide();

        //show the one which user clicked
        $('#' + popID).click(function () {
            $(this).children("div.content").addClass("active");
        });
    });

});

I click on the link on the page to show help nothing happens. I think the issue is that onclick I am hiding all content class and then I am trying to make the one which is clicked by user active. in this case it doesn't show anything when I click on "Help " link. I am able to make it work as desired but I amd getting inconsistent behavior.

This is my first post and first time jquery so pelase bear with me. One constrainnt I have is that cannot access any internet site which means I cannot access google jquery UI classes.

Thanks Miracles

You don't need another .click()

 $(".inlineExplaination").click(function() {
    var popID = $(this).attr('id');
    $(".content").removeClass('active');
    $(this)
        .find("div.content")
        .addClass("active");

});

Here's a working fiddle for you: http://jsfiddle.net/yFEmD/

If you want to hide currently open block by clicking on a link inside, you can attach separate handler. Notice, that in your code "opening" event is attached to parent block, so clicking on a link will also trigger .click() event for it. This means that it will be hidden and instantly shown. To avoid that you need to add .stopPropagation() call.

Here's a fiddle that illustrates that: http://jsfiddle.net/nev3rm0re/yFEmD/2/