When the anchor contains the div, hiding the anchor will also hide the div. To avoid this, place the div next to the anchor. You can use the next() method to select the div.
HTML
<a href="javascript:void(0);" id="viewdetail" style="color:green">view detail</a>
<div class="speakers dis-non" style="display: none">
test data to be shown
</div>
JS
$('#viewdetail').on('click', function(){
// show the 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 choose to wrap the speakers div inside another div as shown 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 is the JS that will display 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 nest the anchor within two divs as depicted 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 the .parent() method twice to target <div class="a">, then utilize
.next().children('div.speakers').show()
to reveal the
speakers div
$('#viewdetail').on('click', function(){
$(this).parent().parent().next().children('div.speakers').show();
$(this).hide();
});
JSFiddle: http://jsfiddle.net/fw3sgc21/8/