Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Accordion con tab aperto di default al caricamento della pagina

    Ciao a tutti.... ho usato uno script in jquery per fare delle voci di una FAQ a fisarmonica (accordion).
    Lo script usato è questo:

    codice:
    $(document).ready(function () {
    $('.accordion-toggle').on('click', function(event){
    event.preventDefault();
    // create accordion variables
    var accordion = $(this);
    var accordionContent = accordion.next('.accordion-content');
    var accordionToggleIcon = $(this).children('.toggle-icon');
    // toggle accordion link open class
    accordion.toggleClass("open");
    // toggle accordion content
    accordionContent.slideToggle(250);
    // change plus/minus icon
    if (accordion.hasClass("open")) {
    accordionToggleIcon.html("<i class='fa fa-minus-square-o'></i>");
    } else {
    accordionToggleIcon.html("<i class='fa fa-plus-square-o'></i>");
    }
    });
    });
    e il codice html è questo:

    codice:
    <div class="accordion-container">
    <a href="#" class="accordion-toggle" id="accordion1">Voce 1
    <span class="toggle-icon"><i class="fa fa-plus-square-o"></i></span>
    </a>
    <div class="accordion-content">
    ....
    </div>
    </div>
    
    <div class="accordion-container">
    <a href="#"  class="accordion-toggle" id="accordion2">Voce 2
    <span  class="toggle-icon"><i class="fa  fa-plus-square-o"></i></span>
    </a>
    <div class="accordion-content">
    ....
    </div>
    Io vorrei che quando si carica la pagina il primo accordion fosse aperto.
    Ho cercato su internet ma non sono riuscito a modificare il codice in modo che funzionasse, sapete aiutarmi?
    Grazie a tutti

  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,655
    Ciao, se stai usando accordion di jquery basterebbe settare il tab voluto come attivo. Se la libreria è un altro probabilmente dovresti avere qualcosa di simile o impostare di default una classe tipo appunto "active" come quella dell'esempio.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.