diff --git a/resources/views/spende/spende.blade.php b/resources/views/spende/spende.blade.php index 222d29edfe5c4557d5c746016a54537d6aff2719..af2da109235efef74e7ac453503cf0bcc7f07ab4 100644 --- a/resources/views/spende/spende.blade.php +++ b/resources/views/spende/spende.blade.php @@ -74,26 +74,54 @@ <style> - #right h3 { - display:inline; - vertical-align: middle; + #right label { + display: block; + vertical-align: middle; + text-align: center; + margin-top: 8px; + font-size: 18px; + color: #666; + } + + #right label:hover { + color: #000; + } + + #right label::after { + font-weight: bold; + font-size: 15px; + content: "▼"; + width: 20px; + height: 20px; + margin-left: 3px; } #expand { height: 0px; - overflow: hidden; + overflow: hidden; + -webkit-transition: height 0.2s; /* Chrome 1-25, Safari 3.2+ */ + -moz-transition: height 0.2s; /* Firefox 4-15 */ + -o-transition: height 0.2s; /* Opera 10.50–12.00 */ + transition: height 0.2s; } - #toggle:checked ~ #expand { height: 100%; } - + + #toggle { + display: none; + visibility: hidden; + } + #toggle:checked ~ label::after { + content: "▲"; + } + </style> <div class="col-lg-6 col-md-12 col-sm-12 others" id="right"> - <input id="toggle" type="checkbox"> - <h3>{!! trans('spende.about.1') !!}</h3> + <input id="toggle" type="checkbox"> + <label for="toggle">{!! trans('spende.about.1') !!}</label> <div id="expand" > <p>{!! trans('spende.about.2') !!}</p> <p>{!! trans('spende.about.3') !!}</p>