How to Toggle show/hide text, with the same code on multiple elements

Question

How can I use the same jquery code, to show/hide text on all my elements, but only affecting the one is click reed more. So multiple of them doesn't open when I click on one.

$(document).ready(function(){
  $( ".showBtn " ).click(function() { 
    $(".textHidden").toggleClass("textShow");    
  }); 
});

.textHidden {
  display:none;
  transition:ease-in-out 1s;
  cursor:pointer;
}

.textShow {
  display:block;  
}

 <script src="http://code.jquery.com/jquery.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">reed more</strong>
  </p>
  <p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum. 
  </p>
</div>

<div style="background-color:red;">
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">Læs mere</strong>
  </p>
  <p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
  </p>
</div>

Answer 1

There are multiple options to do so.

This is one of them:

$(document).ready(function(){
  $( ".showBtn " ).click(function() { 
    $(this).parents('div').first().find(".textHidden").toggleClass("textShow"); 
  }); 
});

.textHidden {
  display:none;
  transition:ease-in-out 1s;
  cursor:pointer;
}

.textShow {
  display:block;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">reed more</strong>
  </p>
  <p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum. 
  </p>
</div>

<div style="background-color:red;">
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">Læs mere</strong>
  </p>
  <p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
  </p>
</div>

Find the div parent, take the first one, find the hidden element inside it and toggle it's class.

Second option you got - take the parent of the current element, find the next-sibling which is hidden:

$(document).ready(function(){
  $( ".showBtn " ).click(function() { 
    $(this).parent().next(".textHidden").toggleClass("textShow"); 
  }); 
});

.textHidden {
  display:none;
  transition:ease-in-out 1s;
  cursor:pointer;
}

.textShow {
  display:block;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">reed more</strong>
  </p>
  <p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum. 
  </p>
</div>

<div style="background-color:red;">
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">Læs mere</strong>
  </p>
  <p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
  </p>
</div>