jquery - menu accordion fisarmonica con memoria al refresh

anu

jquery - menu accordion fisarmonica con memoria al refresh

Salve a tutti!
Volevo sapere come riuscire ad avere un jquery accordion con la memoria, ovvero che al momento del refresh mi mantega il tab selezionato aperto...
Prendiamo ad esempio il base di jquery ui.. :


<head>
[..]
        <script src="js/jquery-1.8.3.js"></script>
    <script src="js/jquery-ui-1.9.2.custom.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script>
    $(function() {
        $( ".accordion" ).accordion();
    });
    </script>
</head>

<body>
<div class="accordion">
    <h4>calzature di sicurezza</h4>
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    <h4>performance</h4>
    <div>Phasellus mattis tincidunt nibh.</div>
    <h4>industria farmaceutica</h4>
    <div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</body>

grazie mille

jantima

Ciao Anu,

Lo puoi fare con due semplici modifiche:

Aggiungendo un plugin per jQuery che si chiama [url=https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js]cookies.js
(Lo devi includere dopo aver incluso jQuery.)
Aggiungendo una funzione in JavaScript che mantiene le informazioni relative a quale tab è attivo tramite cookie.

<script>
	jQuery(document).ready(function(){
        $( "#accordion" ).accordion({
        change: function(event, ui) {
            //set cookie for current index on change event
            $.cookie('saved_index', null);
            $.cookie('saved_index', $( "#accordion" )
                    .accordion( "option", "active" ));
        },
        active:parseInt($.cookie('saved_index'))
    	});
     });
    </script>

Puoi vedere un esempio completo e il codice sorgente [url=http://www.alice.bo.it/wp-content/accordion.html]a questa pagina.

Nota 1. rispetto al tuo codice HTML ho cambiato il tag del div accordion da class="accordion" a id="accordion"
Ti consiglio di usare id, ma se vuoi usare class, allora devi anche cambiare il codice JavaScript nella seconda riga da "#accordion" a ".accordion"

Nota 2. ho anche usato un [url=http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css]foglio di stile fatto apposta per il jquery.ui, non è necessario che lo usi per quanto riguarda la funzionalità.

Ciao, spero di essere stata d'aiuto.

anu

Ciao!
sei stato gentilissimo!
Un'altra cosa.. nel mio accordion, ho aggiunto il tag <a> sulla h4(la testata dell'accordion), vorrei che al click, mi attivasse il link, come posso fare?
Grazie.

jantima

Ciao, potresti essere piu chiaro su quello che cerchi di fare. Ho provato a mettere un anchor e href link all interno del h4, e funziona, solo che manda al link invece di aprire l'accordion. Non vedo l'utilità. Potresti far vedere un esempio del codice che hai provato, e anche spiegare cosa vorresti che accada.

anu

certamente

HTML


<div id="prova">
                <h4 class="accordion" id="body-section1"><a href="accordion.html" target="_blank">Add the Javascript</a></h4>
                <div class="container">
                    <div class="content">
                        <ul>
                            <li><a href="#">ssClose when closed</a></li>
                            <li><a href="#">ssClose when closed</a></li>
                            <li><a href="#">ssClose when closed</a></li>
                            <li><a href="#">ssClose when closed</a></li>
                        </ul>
                    </div>
                </div>


                <h4 class="accordion" id="body-section2"><a href="#">Add the Javascript</a></h4>
                <div class="container">
                    <div class="content">
                        <ul>
                            <li><a href="#">ssClose when closed</a></li>
                            <li><a href="#">ssClose when closed</a></li>
                            <li><a href="#">ssClose when closed</a></li>
                            <li><a href="#">ssClose when closed</a></li>
                        </ul>
                    </div>
                </div>
</div>

Script


<script type="text/javascript" src="javascript/jquery.cookie.min.js"></script>
<script type="text/javascript" src="javascript/jquery.accordion.js"></script>
<script type="text/javascript" src="javascript/highlight.pack.js"></script>
<script type="text/javascript">
            $(document).ready(function() {


                //syntax highlighter
                hljs.tabReplace = '    ';
                hljs.initHighlightingOnLoad();


                //accordion
                $('h4.accordion').accordion({
                    defaultOpen: 'section1',
                    cookieName: 'accordion_nav',
                    speed: 'slow',
                    animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
                        elem.next().slideFadeToggle(opts.speed);
                    },
                    animateClose: function (elem, opts) { //replace the standard slideDown with custom function
                        elem.next().slideFadeToggle(opts.speed);
                    }
                });
    


                //custom animation for open/close
                $.fn.slideFadeToggle = function(speed, easing, callback) {
                    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
                };


            });
        </script>

Ho optato per questa soluzione per avere l'accordion con i cookie.
Vorrei che cliccando sull'h4, si aprisse l'accordion (come da norma) e che mi aprisse il link su un'altra pagina (target:_blank), tutto cui

anu

Provando ad usare la funzione che mi hai dato non mi pare comunque la <a>:


<div id="accordion">
    <h4><a href="ciao.html" target="_blank">cat1</a></h4>
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    <h4>cat2</h4>
    <div>Phasellus mattis tincidunt nibh.</div>
    <h4>cat3</h4>
    <div>Nam dui erat, auctor a, dignissim quis.</div>
</div>



<script src="......code.jquery.com/jquery-1.8.3.js"></script>
    <script src="......code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="js/jquery.cookie.js" type="text/javascript"></script>


    <script>
    jQuery(document).ready(function(){
        $( "#accordion" ).accordion({
        change: function(event, ui) {
            //set cookie for current index on change event
            $.cookie('saved_index', null);
            $.cookie('saved_index', $( "#accordion" )
                    .accordion( "option", "active" ));
        },
        active:parseInt($.cookie('saved_index'))
        });
     });
    </script>

a me basta che si avvi il link in un'altra pagina e l'apertura nella pagina attuale dell'accordion

jantima

Ciao, ho fatto una prova ed in effetti aggiungendo un anchor all interno del h4, l'accordion smette di funzonare e il link nemmeno funziona. Il problema nasce dal fatto che il funzionamento dell accordion aggiunge un tag <span> all interno del <h4> e attorno al testo. (lo puoi vedere se utilizzi firebug oppure il 'inspect element' su firefox o su chrome)
Mettendo un <a> questo funzionamento non accade, e il tag span risulta vuoto, per questo motivo poi l'accordion non funziona.

Ho fatto un paio di prove e una delle soluzioni potrebbe essere usare appunto JavaScript per far aprire la pagina:


 <h4 onclick="window.open('http://www.alice.bo.it', 'newWindow');">calzature di sicurezza</h4>

Ho modificato il mio esempio originale aggiungendo questo funzionamento sul primo link.

anu

Benissimo, funziona tutto alla perfezione
Per chi volesse invece aprire la nuova pagina nella stessa finestra consiglio di utilizzare questo:

<h4 onclick="window.location.href='link';">Categoria</h4>

Grazie infinite a Jantima