jquery - show more/show less text without bootstrap? -

show more/show less text without bootstrap?

there's method like this

.in.collapse+a.btn.showdetails:before  {      content:'hide details «';  }  .collapse+a.btn.showdetails:before  {      content:'show details »';  }

      <!-- example row of columns -->        <div class="row">          <div class="span4 collapse-group">            <h2>heading</h2>             <p class="collapse" id="viewdetails">donec id elit non mi porta gravida @ eget metus. fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. etiam porta sem malesuada magna mollis euismod. donec sed odio dui. </p>            <a class="btn showdetails" data-toggle="collapse" data-target="#viewdetails"></a>          </div>        </div>

without using bootstrap.min.js? because use app.min.js

and if keep using bootstrap.min.js makes dropdown menu wont expand