Click function changing all elements with same class name

Question

I have a div with the same class name that is iterated in a php loop. Whenever the more link is clicked, all the divs with class='detail-section' are opened and closed and not just the specific one selected in the loop. I have tried $(this).closest and it didn't seem to change anything. Either cause it's not close or something. I cant figure it out. Any help is greatly appreciated.

foreach($rows as $a => $b){
  <div><a class='more-detail' style='cursor: pointer; font-color:#0000ff;'>More...</a></div>

  <div class='detail-section' style='display: none;'> 
     <!--Content-->
  </div>

  <div><a class='less-detail' style='cursor: pointer; font-color:#0000ff;'>Less...</a></div>
}

Here is my script to

<script>
$(document).ready(function(){

  $(".more-detail").click(function(){
    $(".detail-section").css("display", "block");
    $(".more-detail").css("display", "none");
    $(".less-detail").css("display", "block");
  });

  $(".less-detail").click(function(){
    $(".detail-section").css("display", "none");
    $(".more-detail").css("display", "block");
    $(".less-detail").css("display", "none");
  });

});
</script>

Answer 1

Use this with .next() and .prev() methods:

  $(".more-detail").click(function(){
    $(this).next(".detail-section").css("display", "block");
    $(this).next(".less-detail").css("display", "block");
    $(this).css("display", "none");
  });

  $(".less-detail").click(function(){
    $(this).prev(".detail-section").css("display", "block");
    $(this).prev(".more-detail").css("display", "block");
    $(this).css("display", "none");
  });

Answer 2

first you have to change your html divs to these lines :

<div>
  <a class='more-detail' style='cursor: pointer; font-color:#0000ff;'>More...</a>
    <div class='detail-section' style='display: none;'>
        details details details details details details details details details details 
    </div>
    <a class='less-detail' style='cursor: pointer; font-color:#0000ff;'>Less...</a>
</div>

then change your jquery to this :

       $(".more-detail").click(function(){
            var $this = $(this);
            var $detail = $this.next(".detail-section");
            var $lessDetail = $detail.next(".less-detail");
            $this.css("display", "none");
            $detail.css("display", "block");
            $lessDetail.css("display", "block");
        });

        $(".less-detail").click(function(){
            var $this = $(this);
            var $detail = $this.prev(".detail-section");
            var $moreDetails = $detail.prev(".more-detail");
            $detail.css("display", "none");
            $moreDetails.css("display", "block");
            $this.css("display", "none");
        });

Answer 3

Try to do it with javascript instead of PHP.

document.getElementsByClassName('more-detail').onclick = function(){
      document.getElementsByClassName('detail-section').style.display = "block";
      document.getElementsByClassName('more-detail').style.display = "none";
     document.getElementsByClassName('less-detail').style.display = "block";
     }
document.getElementsByClassName('less-detail').onclick = function(){
      document.getElementsByClassName('detail-section').style.display = "none";
      document.getElementsByClassName('more-detail').style.display = "block";
     document.getElementsByClassName('less-detail').style.display = "none";
     }