Click On Link To Show Data On Div And Link Disappear Is Not Working

What I need I need when user click on link data is shown. link disappear after click. I have tried code Copy

JS

$('#viewdetail').on('click', function(){
    // show div with speakers class next to the anchor
    $(this).next('div.speakers').show(); 

    // hide the anchor
    $(this).hide();
});

JSFiddle: http://jsfiddle.net/fw3sgc21/2/

EDIT

If you want to wrap the speakers div inside another div as below

<a href="javascript:void(0);" id="viewdetail" style="color:green">view detail</a>
<div class="12u">
    <div class="speakers dis-non">
        test data to be shown
    </div>
</div>

with the following CSS

.dis-non
{
    display: none;
}

Here's the JS that should show the speakers div and hide the clicked anchor

$('#viewdetail').on('click', function(){
    $(this).next().children('div.speakers').show();
    $(this).hide();
});

JSFiddle: http://jsfiddle.net/fw3sgc21/6/

EDIT 2

If you want to put the anchor inside two divs as below

<div class="a">
    <div class="b">
        <a href="javascript:void(0);" id="viewdetail" style="color:green">view detail</a>
    </div>
</div>
<div class="12u">
    <div class="speakers dis-non">
        test data to be shown
    </div>
</div>

Use .parent() method twice to select <div class="a">, then use .next().children('div.speakers').show() to show the speakers div

$('#viewdetail').on('click', function(){
    $(this).parent().parent().next().children('div.speakers').show();
    $(this).hide();
});

JSFiddle: http://jsfiddle.net/fw3sgc21/8/

Solution 2:

Try the following:

$('.viewdetail').click(function()
{
     $('.speakers').show();
     $(this).hide();
});

$(this) refers to the .viewdetail so you don't need the find it again

Pull the div outside the hyperlink

HTML:

<a href="javascript:void(0);" class="viewdetail more" style="color:#8989D3!important;">view details</a>

<div class="speakers dis-non"></div>

Solution 3:

First of all this in your code refers to to the clicked link itself. So this line $(this).find('.viewdetail').hide(); doesn't work, because there is no .viewdetail inside of link. It should be

$('.viewdetail').on('click',function(e) {
        var self = $(this);
        self.find('.speakers').show();
        self.hide();
});

But, if you hide your link, the .speakers will be also hidden, because it's inside of your link. If you want it to be visible, you should place it outside of link

For example:

<a href="#" class="viewdetail more" style="color:#8989D3!important;">view details</a>
<div class="speakers dis-non"></div>

And JS:

$('.viewdetail').on('click',function(e) {
        var self = $(this);
        e.preventDefault(); // prevent link from working the way it should
        self.next('.speakers').show();
        self.hide();
});