JSFiddle - React, Tailwind, and code Playground

by Brad Gilmore

HTML

<div class="show_hide_toggle">
        <a href="#" class="show_hide_search" id="plus">+</a>    
        <div class="show_hide_search2">More</div>
    </div>  

    <div class="slidingDiv" style="display: block;">
          <h2>Content One</h2>
    </div>

    <div class="show_hide_toggle">
        <a href="#" class="show_hide_search" id="plus">+</a>
        <div class="show_hide_search2">More</div>
    </div>  

    <div class="slidingDiv" style="display: block;">
          <h2>Content Two</h2>
    </div>

CSS

.show_hide_search {
  font: bold 14px Arial;
  text-decoration: none;
  background-color: orange;
  color: #FFFFFF;
  padding: 2px 6px 1px 6px;  
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;	
    display: inline-block;
}

.show_hide_search2 {
    display: inline-block;
    margin-left: 10px;
    cursor:pointer;
}

.show_hide_toggle{
    outline: 1px solid transparent; /* avoid traces after sliding */
}

JavaScript

$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide_search").show();

   $('.show_hide_toggle').on('click', function(e){
       e.preventDefault();

       var self    = this,
           sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
               $($(self).children()[0]).text(function(_,txt) {
                    return txt == "–" ? "+" : "–";
               });
           });
    });
});