<?php
// PHP
function toggle_shortcode( $atts, $content = null ) {
extract( shortcode_atts(
array(
'title' => 'Click To Open'
),
$atts ) );
return '<h4 class="trigger"><a href="#">'. $title .'</a></h4><div class="toggle_container">' . do_shortcode($content) . '</div>';
}
add_shortcode('toggle', 'toggle_shortcode');
// jQuery
$(function() {
$(document).ready(function(){
$('.toggle_container').hide();
$('h4.trigger').click(function(){
$(this).toggleClass('active').next().slideToggle('normal');
return false; //Prevent the browser jump to the link anchor
});
});
});
// SCSS
h4 {
&.trigger {
border: 1px solid $light-border;
padding: 14px 18px;
margin: 10px 0 0 0;
position: relative;
a {
color: $color-secondary;
text-decoration: none;
display: block;
}
&.active,
&:hover {
background: $brand-color-primary;
cursor: pointer;
a {
color: #fff;
}
&:after {
color: #fff;
}
}
&:after {
color: $color-secondary;
content: $fa-var-plus;
font-family: 'FontAwesome';
position: absolute;
right: 18px;
top: 15px;
}
}
&.active:after {
color: #fff;
content: $fa-var-minus;
right: 18px;
top: 14px;
}
}
.toggle_container {
border: 1px solid $light-border;
overflow: hidden;
padding: 20px;
}
USAGE:
[toggle title="Title for toggle"]
Add content in here
[/toggle]
[toggle title="Title for toggle"]
Add content in here
[/toggle]
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.