generierter Content mit display-inline

by mischah

HTML

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

CSS

h2 { cursor: pointer; }
h2:before { content:"▸"; display: inline-block; padding-right: 20px; color: red; }
h2.open:before { content:"▾"; display: inline-block; padding-right: 20px; color: red; }


/* 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').toggle(function() {
            $(this).addClass('open');
        }, function() {
            $(this).removeClass('open');
        });

    });
}(jQuery));