update breadcrumbs to be dynamic, pull in title as last node
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;
}