0

I’m using the jQuery toggle function for my navigation. My problem is that by default all toggles are visible but I’d like only to have the first one open and the others closed.

http://jsfiddle.net/TeDFs/1/

HTML

<div id="authors" class="widget">
<h2 class="widget-title">Authors</h2>
<div class="toggle">
    <div class="submenu">
        <ul>
            <li>Name 1</li>
            <li>Name 2</li>
            <li>Name 3</li>
            <li>Name 3</li>
        </ul>
    </div>
</div>


<div id="archives" class="widget">
<h2 class="widget-title">Archiv</h2>
<div class="toggle">
    <div class="submenu">       
        <ul>
                <li>November 2012</li>
            <li>Oktober 2012</li>
        </ul>
    </div>
</div>
</div>​

jQuery

function toggleWidgets() {
    jQuery('.widget-title').addClass('plus'); 

    jQuery('.widget-title').click(function() {
        $(this).toggleClass('plus').toggleClass('minus').next().toggle(180);
    });
} 

jQuery(document).ready(function() {
    toggleWidgets();
} )​

CSS

body {
    font-size: 0.875em; 
    line-height: 1.5em; 
}

h2 {
    font-size: 1.25em;
}

.plus {
    background: url(http://moargh.de/daten/sidebar_arrows.png) 0 -10px no-repeat;
    padding: 0 0 0 12px;
}
.minus {
    background: url(http://moargh.de/daten/sidebar_arrows.png) 0 5px no-repeat;
    padding: 0 0 0 12px;
}

​</p>

Here’s the updated code: first toggle opened, second closed.

http://jsfiddle.net/TeDFs/4/

HTML (Changed class widget-title of the first item to widget-title-visible to inverse the arrows; added class hidden to second item to close it)

<div id="authors" class="widget">
<h2 class="widget-title">Authors</h2>
<div class="toggle">
    <div class="submenu">
        <ul>
            <li>Name 1</li>
            <li>Name 2</li>
            <li>Name 3</li>
            <li>Name 3</li>
        </ul>
    </div>
</div>


<div id="archives" class="widget">
<h2 class="widget-title">Archiv</h2>
<div class="toggle hidden">
    <div class="submenu">       
        <ul>
            <li>November 2012</li>
            <li>Oktober 2012</li>
        </ul>
    </div>
</div>
</div>​

jQuery (Added inverse events for the class widget-title-visible)

function toggleWidgets() {
    jQuery('.widget-title').addClass('plus'); 

    jQuery('.widget-title-visible').addClass('minus'); 

    jQuery('.widget-title-visible').click(function() {
        $(this).toggleClass('minus').toggleClass('plus').next().toggle(180);
    });

    jQuery('.widget-title').click(function() {
        $(this).toggleClass('plus').toggleClass('minus').next().toggle(180);
    });
} 

jQuery(document).ready(function() {
    toggleWidgets();
} )​

CSS (Added class hidden, inverse background in classed plus and minus)

.hidden{
    display: none;
}

.plus {
    background: url(http://moargh.de/daten/sidebar_arrows.png) 0 5px no-repeat;
    padding: 0 0 0 12px;
}
.minus {
    background: url(http://moargh.de/daten/sidebar_arrows.png) 0 -10px no-repeat;
    padding: 0 0 0 12px;
}

​</p>

4

1 回答 1

0

Create a style name .hidden like that : 

.hidden{
    display:none;
}

And apply to your toggle div like this : <div class="toggle hidden"> Finally, inverse your arrows behaviour (plus and minus)

Updated fiddle : http://jsfiddle.net/TeDFs/3/

于 2012-11-03T19:42:54.057 回答