Hilfe bei Accordion Code

da wo du das faq haben willst wohl neue content seite

ja kannst als datei oder im se3 machen - beides bewirkt am ende das selbe

das wäre wohl usermod js, das soll aber glaube wegfallen. daher dann evtl. als script mit im content des html

in images folder, man muss halt im code den pfad entsprechend anpassen

aber gambio nutzt bootstrap, da ist coolaps eigentlich drinnen.
wäre (Link nur für registrierte Nutzer sichtbar.)

 

Ja, habs aber eben versucht, das scheint gambio aufgrund sparmaßnahmen (zu gunsten der Ladezeiten) nicht mit genommen zu haben. - muss man also doch nachbauen bzw. bisl. mehr fummeln.

 

ob der code richtig ist weiß ich nicht. Gambio hat bootstrap und jquery beschnitten. Man muss diese Funktionen also selbst noch einbauen.
Also eigenes JS hinterlegen auf den Seiten.
Wenns nur bisl ist könnt man das mit
<script> … </script> evtl. machen. Aber JS is nicht mein ding. das mag ich nicht. das so unschön zu lesen.

 

Habe mir bootstrap von http://holdirbootstrap.de/ heruntergeladen, da ich das immer zum Testen nehme.
Dann davon unter Honeygrid/usermod/javascript/global/ die bootstrap-collapse.min.js eingefügt, dann funktionierte das wieder unter 3.4.x.x

 

Pack die angehängte accordion.js mal in: /templates/Honeygrid/usermod/javascript/Global/

 

Das JS muss da wieder raus aus dem Content, sprich das muss weg:

// WWA ACCORDION BOX Gambio Honeygrid $(document).ready(function() {
$('.abtitel').click(function() {
$('.abtitel').removeClass('aboffen');
$('.abinhalt').slideUp('normal');
if($(this).next().is(':hidden') == true) {
$(this).addClass('aboffen');
$(this).next().slideDown('normal');
} }); });

 

Es geht auch ohne Javascript und Jquery:
Einfach HTML und CSS: (Link nur für registrierte Nutzer sichtbar.)

 

Ich habe mein Accordion zwar auch mit JS gemacht....aber irgendwie komme ich nicht auf dem Fehler. Funktioniert alles soweit, aber wenn ich auf dem nächstes Tab klicke, sollte der offene sich automatisch schließen um eine lange Liste zu vermeiden. Vielleicht hat jemand eine Idee oder sieht was ich falsch gemacht habe?

Mein JS script:

Code:

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}

HTML:

HTML:

button.accordion {
    background-color: #eee;
    color: #606eb5;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 18px;
    width: 100%;
    border: 1px;
    text-align: left;
    outline: none;
    font-size: 18px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ccc;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease-out;
}

Weiter versuchte ich sowas zu bekommen mit dem Farbverlauf, leider geht das hier nicht mit dem Befehl:

HTML:

background:
    linear-gradient(
        cyan,
        transparent
    ),
    linear-gradient(
        -45deg,
        magenta,
        transparent
    ),
    linear-gradient(
        45deg,
        yellow,
        transparent
    );
background-blend-mode: multiply;

Ich sage schon mal Danke für irgendwelche Tipps.

 

Könntest du mir mit deiner Variante helfen? Finde ich sehr elegant gestaltet.

 

Ich habe es jetzt so gelöst: (Link nur für registrierte Nutzer sichtbar.) allerdings ärgert es mich dass einen offenen Reiter nicht zugeht wenn der nächste aufgemacht wird. Ich finde den Fehler einfach nicht :-(

 

Da fehlt was im js, das der nächste geschlossen wird.
Schnellste Lösung, dein Html so ändern:

HTML:

......................
<button class="faq_frage">Why do I need to register an account?</button>

<div class="faq-antwort">
    <p>
        <br />
        Digital Sourcing offer 3 types of account and depending on your size / style of business you will receive varying minimum order quantity requirements.<br />
        <br />
        During the account setup we ask you for company details such as your company registration number and VAT number (applicable for SME-accounts and National Accounts).<br />
        <br />
        This information is imperative for establishing an account, receiving wholesale prices and Ex-VAT invoices, where applicable. We require this information before we can grant you access to our secured page.<br />
        <br />
        I&rsquo;m sure you can appreciate that we need to protect your costs prices.
    </p>
</div>
<button class="faq_frage">How can I change my account from Small Wholesale to SME?</button>

<div class="faq-antwort">
    <p>
        <br />
        You can change your accounts by writing the Wholesale Team via email to wholesale@digitalsourcing.support. Please include your company registration number and your VAT number.
    </p>
</div>
....................

dann das js unter /global :

Code:

$(document).ready( function() {
$('.faq_frage').not('.faq_frage_active').next('.faq-antwort').hide();
$('.faq_frage').click( function() {
var trig = $(this);
if ( trig.hasClass('faq_frage_active') ) {
trig.next('.faq-antwort').slideToggle('slow');
trig.removeClass('faq_frage_active');
} else {
$('.faq_frage_active').next('.faq-antwort').slideToggle('slow');
$('.faq_frage_active').removeClass('faq_frage_active');
trig.next('.faq-antwort').slideToggle('slow');
trig.addClass('faq_frage_active');
};
return false;
});
});

so funktioniert das bei mir ohne Problem,
dann das css noch anpassen.
deine classen .panel und .accordion werden vielleicht im Shop noch anderweitig verwendet,
so das es nicht funktioniert. Bei Neueinbauten immer eigene class-namen erfinden.

 

Hallo Postel,

vielen Dank. Es hat perfekt funktioniert. Jetzt muss ich nur noch mein CSS anpassen und alle sind Glücklich.

Besten Dank nochmal für die Hilfe.