generierter Content mit display-inline

by mischah

HTML

<h2>Um ein triviales Beispiel zu nehmen.</h2>

CSS

h2 { cursor: pointer; position: relative; margin-left: 20px;}

h2:before,
h2.open:before {
    display: inline-block; width: 18px;
}
h2:before { content:"▸"; }
h2.open:before { content:"▾"; }


/* styling basics */
html { padding: 20px 0; background-color: #efefef; }
body { width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px; }

JavaScript

(function($) {
    $(function() {

        $('h2').click(function() {
            $(this).toggleClass('open');
        });

    });
}(jQuery));