CODEWITHSUNDEEP
jquery
ngplayground
ngplayground

Reputation: 21667

jQuery focus on clicked content

I have article elements which have inner html which are .article-row and .content.

.content is hidden and when .article-row is clicked .content will then show. But I would like the other article's to .hide() so that the .content of the currently clicked item is the only item in view.

$('.article-row').click(function(e){
    e.preventDefault();
    if($(this).parent().find('.content').is(':visible')){
        $('.content').hide();
    }else{
        $('.content').hide();
        $(this).parent().find('.content').show();
    }
});

$('.close').click(function(e){
    $(this).parent().hide();    
});

jsFiddle

Upvotes: 0

Views: 32

Answers (1)

Manu M
Manu M

Reputation: 1064

You can use not function in jquery for this. I have updated your fiddle like this. Please check out.

$('.article-row').click(function(e){
   e.preventDefault();
   $('.article-row').not(this).hide();
if($(this).parent().find('.content').is(':visible')){
    $('.content').hide();
}else{
    $('.content').hide();
    $(this).parent().find('.content').show();
}
 });

 $('.close').click(function(e){
  $('.article-row').show();
  $(this).parent().hide();    
 });

http://jsfiddle.net/QpA6b/2/

Upvotes: 1

Related Questions