JSFiddle - React, Tailwind, and code Playground

by DotDotDot

HTML

<div ng-app='app'>
    <a href="#target-id" data-collapsible="isCollapsed">Open</a>
    blah blah blah<br/>
    <div id="target-id">This div is displayed </div>
    

</div>

CSS

</style>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js'></script>
<style>
.hidden{
 display:none;   
}
}

JavaScript

var app=angular.module('app',[]);

app.directive('collapsible', function() {
    return {
        restrict: 'A',
        link: function( scope, el, attrs ) {
            scope.displayed=false;
            scope.getTheElement=function(){
                 var target = attrs.href.slice(1);
                 return document.getElementById(target);
            }
            el.bind('click', function(e){
                if(scope.getTheElement().style.display=="none")
                    scope.getTheElement().style.display=""
                else
                    scope.getTheElement().style.display="none";
            });
        }
    };
});