var emc = angular.module('emc', []);
emc.directive('showhide', function () {
return {
restrict: 'C',
link: function (scope, element, attrs) {
// find our "show" div
var show = angular.element(element.find('.show'));
opened = true;
show.bind('click', toggle);
function toggle() {
opened = !opened;
element.removeClass(opened ? 'closed' : 'opened');
element.addClass(opened ? 'opened' : 'closed');
}
toggle();
}
}
});
<div class="showhide" ng-app="emc">
<div class="less">
<p>This is less text. It shows when our div is collapsed/closed.</p>
</div>
<div class="more">
<p>This is more text. This is what shows when you click "More..."</p>
</div>
<div class="show"><a href="#"></a>
</div>
</div>
.showhide {
display: inline-block;
width: 90%;
padding: 5px 3%;
}
.showhide > .less {
}
.showhide > .more {
}
.showhide > .show {
margin: 0px 75%;
border: 1px solid #CCCCCC;
padding: .3em;
width: 20%;
text-align: center;
position: relative;
top: 10px;
background: white;
}
.showhide.opened > .more {
display: block;
}
.showhide.closed > .more {
display: none;
}
.showhide.closed > .show a:after {
content:'More...';
}
.showhide.opened > .show a:after {
content:'Less...';
}
External resources loaded into this fiddle: