Mit einem Button lassen sich Texte expandieren und wieder verstecken. Damit lassen sich Infos bereitstellen, ohne, dass die Website zur Bleiwüste wird. Try it.
Für diesen Trick benötigen Sie eine Reihe von Codes – es bleibt aber simpel.
Zunächst kopieren Sie den folgenden Block in die Datei functions.php Ihrer Website – unter Design/Theme-Datei-Editor:
function expand_shortcode($atts, $content = null) {
$default_class = "button background-taste";
$a = shortcode_atts( array(
'more' => 'Mehr erfahren',
'less' => 'Text verbergen',
'class' => '',
'style' => '',
), $atts );
$html='<div class="hide">'.$content.'</div>
<div class="exp-wrappper">
<span data-more="'.$a['more'].'" data-less="'.$a['less'].'" class="exp-button '.$default_class.' '.$a['class'].'" style="'.$a['style'].'">'.$a['more'].'</span>
</div>';
return $html;
}
add_shortCode('expand', 'expand_shortcode');Nun folgt ein jQuery-Script. Dieses kopieren Sie in den <head>-Bereich Ihrer Website – im Divi-Theme unter Divi/Theme-Optionen/Integration oder wahlweise auch in ein Code-Modul auf der entsprechenden Seite:
<script>
jQuery(document).ready(function($){
$(".exp-button").click(function () {
var lessName = $(this).attr('data-less');
var moreName = $(this).attr('data-more');
var duree = 1000;
if($(this).text()==moreName) {
$(this).text(lessName);
$(this).parent().prev().slideDown(duree);
}
else {
$(this).text(moreName);
$(this).parent().prev().slideUp(duree);
}
var x = setTimeout(() => $(this).closest('.degrade').toggleClass('close'), duree);
});
});
</script>Zu guter Letzt folgt CSS-Code. Diesen fügen Sie unter Design/Customizer/Zusätzliches CSS in das Stylesheet Ihrer Website ein:
/* Taste ausklappen */
.hide {
display:none;
}
.degrade {
transition:background-color 1300ms ease 0ms,border 1300ms ease 0ms;
}
.degrade.close > *:after {
content:"";
position:absolute;
top:0;
display:block;
width:100%;
height:calc(100% - 32px);
}
/* Style hier Deine Taste */
.button {
display:block;
max-width:200px;
cursor:pointer;
padding:4px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
text-align:center;
color:#ffffff;
margin-top:20px;
transition: background-color 300ms ease 0ms,border 300ms ease 0ms;
}
.button:hover {
box-shadow:1px solid #59b14b33;
}
/* Hintergrundfarbe Deiner Taste */
.background-taste {
background:#293280;
}
/* style hier die Hover Farbe Deiner Taste */
.background-taste:hover {
background:#59b14b33;
color: #293280;
box-shadow:1px 1px 10px 0px rgba(0,0,0,0.3);
}
#293280
grün: #59B14B
hellgrün: #59b14b33Das ist der sichtbare Text: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Ein ziemlich einfacher Trick. Oder?
Werbung
Werbung
