Click On Link To Show Data On Div And Link Disappear Is Not Working
$('#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
<ahref="javascript:void(0);"id="viewdetail"style="color:green">view detail</a><divclass="12u"><divclass="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
<divclass="a"><divclass="b"><ahref="javascript:void(0);"id="viewdetail"style="color:green">view detail</a></div></div><divclass="12u"><divclass="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:
<ahref="javascript:void(0);"class="viewdetail more"style="color:#8989D3!important;">view details</a><divclass="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:
<ahref="#"class="viewdetail more"style="color:#8989D3!important;">view details</a><divclass="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();
});
Post a Comment for "Click On Link To Show Data On Div And Link Disappear Is Not Working"