how to show and hide element inside a single div?

Question

I have a weird case that I need help.

I am trying to hide and show certain stuff when user clicks a button.

My html

 <div class='slide-content'> <h1>Title</h1> <div class='title-bar'> sub title here <div class='edit-container'> <a class='edit' href='#'>Edit</a> </div> </div> <div id='content' class='details'> <div class='contents'> <p>contents here</p> </div> <div class='break'></div> </div> <div id='edit-content' class='content-details'> <div class='contents'> <div class='editable-content'> contents here…... </div> </div> <div class='break'></div> </div> </div> <div class='slide-content'> …...

another 10 slide-contents divs…

jquery

 $('.edit').on('click', function(e){ e.stopPropagation(); if($(this).text()=='Edit'){ $(this).text('Done'); $(this).closest('.slide-content').find($('.content-details')).show(); $(this).closest('.slide-content').find($('.details')).hide(); }else{ $(this).text('Edit'); $(this).closest('.slide-content').find($('.content-details')).hide(); $(this).closest('.slide-content').find($('.details').show()); } }) });

css

.content-details{ display:none; }

My problem is, when I click the edit button first time, it shows my .content-details and hide .detail div. However, when I click the edit button again, it show every .details div in my page (even it's under different .slide-content div). My intension is to show only 1 .detail div under current .slide-content.

I am not sure what happen here. Can anyone help me out on this? Thanks a lot!

Jason P · Accepted Answer · 2013-12-11 18:58:44Z

You aren't closing your parentheses properly:

$(this).closest('.slide-content').find($('.details').show());

To see the problem more clearly:

$(this).closest('.slide-content').find( $('.details').show() );

so you are explicitly calling $('.details').show().

You want this:

$(this).closest('.slide-content').find($('.details')).show();

But actually, you don't need a jquery object for find(), so this works just as well (here, and the other places you are using this pattern):

$(this).closest('.slide-content').find('.details').show();

Also, as a final note, I think it would be good to simplify your code and use a little caching:

$('.edit').on('click', function (e) { e.stopPropagation(); var $this = $(this); $this.text($this.text() == 'Edit' ? 'Done' : 'Edit'); $this.closest('.slide-content').find('.content-details, .details').toggle(); });

Roko C. Buljan · Accepted Answer · 2013-12-11 18:59:03Z

Actually this is all you need: http://jsbin.com/IsUQaJA/1/edit

$('.edit').on('click', function(e){ e.preventDefault(); var txt = $(this).text(); $(this).text(txt=='Edit'?'Done':'Edit').closest('.slide-content') .find('.details, .content-details').toggle(); });

Collectives™ on Stack Overflow

how to show and hide element inside a single div?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related