jQuery slideDown only section that has been clicked

Question

I am using jQuery to reveal some content on click like this...

$(document).ready(function () {

    $('.extraClick').click(function(){

          $( ".extra" ).slideDown( "slow", function() {});

    });

});

.extra {
    display: none;
}

.section {
    padding:10px;
    background:grey;
    margin-bottom:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">

    <div class="container">
    
      <p>
          This is the section 1 content
      </p>
      
      <div class="extraClick">
          Click Me
      </div>

    </div>
    
    <div class="extra">
         This is some extra content
    </div>

</div>

<div class="section">

    <div class="container">
    
      <p>
          This is the section 2 content
      </p>
      
      <div class="extraClick">
          Click Me
      </div>

    </div>
    
    <div class="extra">
         This is some extra content
    </div>

</div>

<div class="section">

    <div class="container">
    
      <p>
          This is the section 3 content
      </p>
      
      <div class="extraClick">
          Click Me
      </div>

    </div>
    
    <div class="extra">
         This is some extra content
    </div>

</div>

Answer 1

I think you have to use $(this) instead of $(".extra").