CODEWITHSUNDEEP
javascriptjqueryaccordion
David MARTIN
David MARTIN

Reputation: 11

jQuery UI Accordion: opening a panel from top menu and closing an open panel

First of all, I am French, so please forgive my possible English mistakes... ;-) Second, I'm not too bad at (x)HTML and CSS, but I'm an absolute beginner in jQuery.

I'm trying to set up a jQuery UI Accordion that would allow: - opening a panel when clicking its header (done) - closing this open panel when re-clicking its header (not done) - opening a specific panel according to a hashtag in the URL (done) - changing the hashtag in the URL when another panel is opened (done) - removing the hashtag in the URL when closing an open panel (dont, quite dirty but done) - opening a panel when clicking a link in the page's top menu (not done, in spite of looooong hours trying to make it work)

As you can see, I've managed to address some of my needs, but I just can't figure out how to solve the last two - which, for reminder, are: - closing this open panel when re-clicking its header: according to the documentation, the collapsible: true option should have made it OK... but it didn't - or maybe I implemented it the wrong way? - opening a panel when clicking a submenu link in the page's top menu: does anybody know if/how that would be possible?

Any help on that would be really appreciated. Here's my code sample:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="language" http-equiv="Content-Language" content="fr-FR" /> 
    <link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" />
    <title>Votre projet</title>
</head> 
<body class="page"> 
    <div id="content"> 
      <div id="menu">
            <ul>
                <li><a href="#">Accueil</a></li>
                <li class="current"><a href="test.html">Votre projet</a>
                    <div>
                        <ul>
                            <li><a href="test.html#extension" class="accordion">Extension</a></li>
                            <li><a href="test.html#renovation">Renovation</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Mes services</a></li>
                <li><a href="#">Partenaires</a></li>
                <li class="last"><a href="#">Contact</a></li>
            </ul>
            <a href="http://apycom.com"></a>
        </div>
        <div class="main">
            <div id="projet">

                <a name="extension" id="extension"></a>
            <!-- ACCORDION HEADER -->   
                <a class="accordion title" href="#extension" title="Afficher / masquer les details pour Extension">Extension</a>
            <!-- ACCORDION CONTENT -->
                <div>
                    <p>Pour construire un batiment neuf ou integrer une extension a une construction existante, il est essentiel de s'entourer de professionnels competents.</p>
                    <p>Dans le domaine de l'electricite, les imperatifs sont multiples&nbsp;: respect des normes, confort, longevite des equipements&hellip;</p>
                </div>

                <a name="renovation" id="renovation"></a>
            <!-- ACCORDION HEADER -->   
                <a class="accordion" href="#renovation" title="Afficher / masquer les details pour Renovation">Renovation</a>
            <!-- ACCORDION CONTENT -->
                <div>
                    <p>Dans le cadre d'un projet de renovation, un soin particulier doit etre apporte à l'electricite. Une belle installation electrique est une installation qui ne se voit pas&nbsp;: l'exercice requiert un savoir-faire tout particulier, au travers de solutions adaptees au bati. En renovation, le chauffage electrique est par exemple le seul moyen d'obtenir une installation performante sans avoir a effectuer de gros travaux.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Javascript --> 
        <!-- JQuery --> 
            <!-- jQuery Google CDN hosted with local fallback --> 
            <!-- Weird doc.write slashes explained here http://www.codehouse.com/javascript/articles/external/ --> 
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
            <script type="text/javascript"> 
            if (typeof jQuery == 'undefined') {
            document.write('<script src="', 'js/jquery.js', '" type="text/JavaScript"><\/script>');
            }
            </script>
        <!-- Accordion -->
            <script src="js/jquery-ui.min.js" type="text/javascript"></script>
            <script type="text/javascript">
                $().ready(
                    function(){
                        $(".accordion").click(function(event){
                        if (!$(this).hasClass('selected')){ 
                            $(this).addClass("selected");
                            window.location.hash=this.hash;
                            } 
                        else if ($(this).hasClass('selected')){
                            $(this).removeClass('selected');
                            window.location=window.location.href.split('#')[0];
                            }
                        });
                        $('#projet').accordion({
                            autoHeight: false,
                            navigation: true,
                            collapsible: true,
                            active: false,
                            header: '.accordion'
                        });
                    });
            </script>
        <!-- Menu -->
            <script type="text/javascript" src="js/menu.js"></script>
</body> 
</html>

And a live page in case you might need it: http://davidgmmartin.free.fr/accordion/test.html

Please help me with this, it's driving me nuts!

Thanks for your help, David

Upvotes: 1

Views: 1743

Answers (1)

Luke
Luke

Reputation: 8407

One more question, why are you setting the hash in the window.location?

you could easily force the "click" for the accordion item in the navigation.

$("something").click() <-- will force the item to be clicked, all events will be handled as known.

I tried this out

$(".ui-accordion .ui-accordion-header:nth(1)").click()

and it works

the "nth(1)" is just testing, since you have just to, you can pass in 0, or 1, or you make a custom method like

function openTab(name) {
$(".ui-accordion .ui-accordion-header[href=#" + name + "]").click()
}

us it like openTab("extension");

Btw. this: window.location=window.location.href.split('#')[0]; is making a full page refresh!

Upvotes: 1

Related Questions