prabal.t prabal.t - 1 month ago 6
jQuery Question

jquery opening one section at once

I am currently working on laravel 5.2.I am trying to make a comment section for each post.Here's my blade view,
`

<div class="row">
<section class="col-md-12">
@foreach($storages as $storage)
@if($storage->post_id==$post->id)
<div id="jumbo3" class="jumbotron">
<div class="row" id="rlr">
<section class="col-md-offset-1 col-md-2">
<img id="imagesize8" class="img-circle" src="/src/uploads/avatars/{{$storage->user->avatar}}"/>
</section>
<section class="col-md-3">
<a id="user10" href=""><h5 id="h52">{{$storage->user->getNameOrUsername() }}</h5></a>
</section>
<section class="col-md-offset-3 col-md-3">
<span id="rmvsgn1" class="glyphicon glyphicon-remove-sign"></span>

</section>
</div>
@if($storage->comment==0)
<div class="row">
{{ $storage->textcomment}}
</div>
@endif
@if($storage->textcomment==0)
<div class="row">
<img src="{{$storage->comment}}"/>
</div>
@endif

@endif
@endforeach
</section>
</div>
<button class="see-more">See Comments</button>
</div>
</div>
@endif
@endforeach


I am trying to display the comments by clicking on the comment section,here's my jquery,

<script>
$(document).ready(function () {
$('.jumbotron').hide('.jumbotron');
$('.see-more').click(function () {
$('.jumbotron').toggle('.jumbotron');
});
});
</script>


but every time I am trying to get it for one section,it opens up for all posts.

Answer

$(document).ready(function() {
  $(".see-more").click(function(){
  	$(this).prev( ".content" ).toggle();
    
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class="article">
  <div class="content">
   Content 1
  </div>
  <button class="see-more">
  See more
  </button>
</div><div class="article">
  <div class="content">
   Content 2
  </div>
  <button class="see-more">
  See more
  </button>
</div><div class="article">
  <div class="content">
   Content 3
  </div>
  <button class="see-more">
  See more
  </button>
</div><div class="article">
  <div class="content">
   Content 4
  </div>
  <button class="see-more">
  See more
  </button>
</div><div class="article">
  <div class="content">
   Content 5
  </div>
  <button class="see-more">
  See more
  </button>
</div>
<div class="article">
  <div class="content">
   Content 6
  </div>
  <button class="see-more">
  See more
  </button>
</div>


</body>
</html>