Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1065526

    is it possible to do something like
    – i built a color-section and fill it with different Cotent, Medua, toggles etc.
    – it is a huge section and i want to hide 3/4 of it
    -> by clicking a button the hidden content will be shown like a toggle-bar

    #1065829

    Hey breezemedia,

    You could try the Accordion element for instance?

    Best regards,
    Rikard

    #1065916

    well, no that is not what i mean.
    i used many accordeons o the site, i want to do something like an layout-element with accordeon-function.

    maybe you can have a look on… akad-fernstudium.at below the slider you can see an area: “Studiengänge, die perfekt zu ihnen passen”
    -> below that are some accordeon-elements
    since that area is huge, i want to reduce the whole color-section “studiengänge” and hide 3/4 of the content. so the onepager is a little easier to overview.

    #1065968

    well this is something on request long time ago:
    https://webers-testseite.de/colorsection-toggle/

    ich schreibe jetzt mal gerade deutsch, geht mir besser aus den Händen.
    Eigentlich steht alles ganz gut auf der Seite.
    Ich habe allerdings den Button ( full-width button) unter die Toggle Section gesetzt.
    (Purchase code hidden if logged out) -14-28-25.jpg”>(Purchase code hidden if logged out) -14-28-25.jpg” alt=”” />
    den code musst du dann deinen Wünschen entsprechend anpassen. die Button Beschriftung kannst du dann auch toggeln. Button Anfangstext und im Code sollte aber übereinstimmen!:

    // color-section toggle
    function add_custom_toggler(){
    ?>
    <script>
    (function($){
      $(window).load(function () {
        $('#toggle-color-section').addClass('notseen');
        $('.avia-button-wrap.color-section-toggler').click(function () {
         $('#toggle-color-section').toggleClass('notseen');
         $('.avia-button-wrap.color-section-toggler span.avia_iconbox_title').text(function(i, v){
                 return v === 'Studiengänge, die perfekt zu Ihren Fähigkeiten passen' ? 'Danke für die Info' : 'Studiengänge, die perfekt zu Ihren Fähigkeiten passen'
         })   
        });
      });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_toggler');

    Wenn noch fragen sind – gerne

    #1065971

    Hey Günni, das ist mega-klasse. Danke für die Hilfe! Werde es gleich probieren.

    #1065976

    Ausserdem könntest du mal folgenden Code auch noch probieren; den kann ich via Developer Tools auf deiner Seite nicht simulieren.
    Der soll dafür sorgen dass du nicht nur innerhalb eines Toggles immer nur einen auf hast, sondern auch in benachbarten toggles:

    function only_one_toggle_open_at_the_same_time(){
    ?>
    <script>
    (function($){
        $(window).load(function() {
        	$('.toggler').on('click', function(){
      		$('.toggler').not(this).next().removeClass('active_tc');
    	});
        	$('.toggler').on('click', function(){
                    $('.toggler').not(this).removeClass('activeTitle');	
    	});
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'only_one_toggle_open_at_the_same_time');
    #1066066

    hey, der zweite Code funktioinert super. beim ersten habe ich noch ein kleines Problem.

    wenn ich den Button klicke, lädt es kurz und refresht dann die Seite.

    Wäre es eigentlich auch möglich nur einen Teil der Sektion auszublenden? Ich habe jetzt mal zum Test eine 100% sichtbare und eine “unsichtbare” Sektion erstellt. Optimal wäre es, wenn es nur eine Sektion gibt, die ohne Button 25% sichtbar und 75% unsichtbar wäre.

    #1066096

    hast du es so wie auf meiner Testseite beschrieben gemacht, dass du die Id als link Ziel für den Button eingegeben? also relativ nicht absolut:

    also in den Button link : #studiengangmore2

    • Give a unique ID to the Color-Section to toggle f.e.: toggle-color-section
    • Give to the button a custom-class f.e: color-section-toggler
    • the button link is the unique ID of the toggle section

    ausserdem sollte dann der Teil für die Beschriftung so aussehen:

         $('.avia-button-wrap.color-section-toggler span.avia_iconbox_title').text(function(i, v){
                 return v === 'alle Studiengänge' ? 'weniger Studiengänge' : 'alle Studiengänge'
         })
    #1066104

    ohje, du hast recht. der letzte Punkt war nicht korrekt. ich hatte den manuellen Link falsch gesetzt… geht also perfekt, wie gewohnt.
    bleibt die Kür, ich habe das jetzt quasi so geteilt, dass ich eine Sektion sichtbar habe (100% sichtbar) und darunter die gleiche Sektion mit erweitertem Content unter dem Button versteckt. Optimal fürs Design wäre es, wenn ich insgesamt nur die eine Sektion “studiengang” hätte und der Button quasi 75% dieser Sektion ausblendet/einblendet. Die aktuelle Lösung funktioniert aber wirklich auch schon super!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.