view more

//  js
//  < mc_read_more_btn >
if ( isFrontPage ) {
  $('.mc_read_more a').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('.mc_hidden').toggleClass('active');
    $('.mc_read_more').toggleClass('active');
    if ( $('.mc_hidden').hasClass('active') ) {
      $('.mc_read_more a').text("View Less");
    } else {
      $('.mc_read_more a').text("View More");
    }
  });
}
//  </ mc_read_more_btn >

//  css
/*  < mc_read_more_btn >  */
.article .mc_read_more {
  margin: 20px 0 0;
  /* overflow-anchor: none; */
}
.article .mc_read_more a {
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  padding: 14px 20px 14px;
  color: #878787;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid #878787;
}
.article .mc_read_more a:hover {
  color: #fff;
  text-decoration: none;
  background: #92cff7;
  border-color: #92cff7;
}
.article .mc_hidden { display: none; }
.article .mc_hidden.active { display: block; }
/*  </ mc_read_more_btn >  */

//  < mc_read_more_btn >
function nc_shortcode_read_more( $atts ) {
  $action = $atts['action'];
  if ( $action == 'open' ) {
    return <<<EOHTML
    <div class='mc_hidden'>
EOHTML;
  } else if ( $action == 'close' ) {
    return <<<EOHTML
    </div>
EOHTML;
  } else if ( $action == 'btn' ) {
    return <<<EOHTML
    <div class='mc_read_more'>
      <a href="#">View More</a>
    </div>
EOHTML;
  } else {
    return "<p>THE nc_read_more SHORTCODE WAS ENTERED INCORRECTLY</p>";
  }
}
add_shortcode( 'nc_read_more', 'nc_shortcode_read_more' );
//  </ mc_read_more_btn >

[nc_read_more action=open]
[nc_read_more action=close]
[nc_read_more action=btn]

UPDATED with DATA ATTRIBUTES

//  < element_read_more >
$('.element_read_more a').click(function(e) {
  e.preventDefault();
  e.stopPropagation();

  var view_link = $(this).data('view-link');
  $('#wrapper').find("[data-view-section='" + view_link + "']" ).toggleClass('data_active');

  $(this).toggleClass('data_active');
  if ( $(this).hasClass('data_active') ) {
    $(this).text("View Less");
  } else {
    $(this).text("Learn More");
  }
});
//  </ element_read_more >

<div class="sxn_attorney" data-view-section="sxn_attorney">
  <p>text</p>

  <div class="cont_hidden">

    <p>text</p>
  
    <p>text</p>

  </div>

  <div class="element_read_more">
    <a data-view-link="sxn_attorney">Learn More</a>
  </div>
</div><!--  </ sxn_ >  -->

.sxn_ .cont_hidden {
  display: none;
}
.sxn_.data_active .cont_hidden {
  display: block;
}