Le menu accordion

**gerson** · 29/09/2014, 11h57

salut,
je suis un débutant en javascript et je voudrais passer le paramètres 'in' à la classe 'class=collaspe' de 'id=demo1' avec du javasrcipt pour rendre le sous repertoire active,pour ne pas écrire dans mon code HTMl..merci de vouloir m'aidé.

voici mon code html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="app/css/bootstrap.css">
 
<link rel="stylesheet" href="app/css/bootstrap-theme.css">
<style>
 
    .panelHo{
        border: 0px solid black;
 
    }
 
    .titre{
        font-size: 14px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    }
    .listeLien{
        width: 113%;
        float: left;
        margin-left: -15px;
        height: auto;
        border:0px;
    }
 
 
    .panel-body{
        background-color:#FFF;
    }
 
    .panelNavig {
        border: none;
        background-color: #ffffff;
        box-shadow: 0 0 3px #dadada;
        -webkit-box-shadow: 0 0 3px #dadada;
        -moz-box-shadow: 0 0 3px #dadada;
        border-radius: 4px;
        position: relative;
        margin-bottom: 20px;
        border-color: #ddd;
        font-family: 'Open Sans', sans-serif;
    }
 
    .panel .panelLien {
        font-size: 13px;
        font-weight: bold;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        color: #555555;
        background-color: white;
        border: none;
        padding: 10px;
        border-radius: 4px;
    }
    .panelLien a{
        color:#555555;
        border-bottom: 1px solid transparent;
    }
    .listeLien{
        padding: 6px 15px;
        border: none;
        font-size: 12px;
 
    }
    .liens{
        border: none;
    }
 
    .lien{
        color:#555;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
    }
    .lienss{
        color: white;
        background-color: #2d6ca2;
    }
    a.lienss:hover, a.lienss.active, a.lienss.active:hover, a.lienss.active:focus {
        z-index: 2;
        color: white;
        background-color: #2d6ca2;
 
    }
    a.liens:hover, a.liens.active, a.liens.active:hover, a.liens.active:focus {
        z-index: 2;
        color: #555555;
        background-color: #f7f7f7;
        border-left: 3px solid #384EC2 !important;
    }
    a.list-group-item-success {
        color: white;
    }
    .list-group.panel > .list-group-item {
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        border:none;
    }
</style>
 
<div id="MainMenu">
    <div class="list-group panel panel-primary">
        <a href="#demo1" class="list-group-item list-group-item-success lienss" data-toggle="collapse" data-parent="#MainMenu">Dashboard</a>
        <div class="collapse in" id="demo1">
            <a href="dashboard.html" class="list-group-item liens"><i class="fa fa-cogs "></i>&nbsp;<span class="lien">Dashboard</span></a>
        </div>
 
        <a href="#demo2" class="list-group-item list-group-item-success lienss" data-toggle="collapse" data-parent="#MainMenu">Users Management</a>
        <div class="collapse" id="demo2">
            <a href="usersdashboard.html" class="list-group-item liens"><i class="fa fa-cogs "></i>&nbsp;<span>Users Dashboard</span></a>
            <a href="user-section-management.html" class="list-group-item liens"><i class="fa fa-cogs "></i>&nbsp;<span>Section Management</span></a>
            <a href="users-view.html" class="list-group-item liens"><i class="fa fa-list-ol "></i>&nbsp;<span>Users Views</span></a>
        </div>
 
        <a href="#demo3" class="list-group-item list-group-item-success lienss" data-toggle="collapse" data-parent="#MainMenu">Event Management</a>
        <div class="collapse" id="demo3">
            <a href="events-dashboard.html" class="list-group-item liens"><i class="fa fa-cogs "></i>&nbsp;<span>Event Dashboard</span></a>
            <a href="events-view.html" class="list-group-item liens"><i class="fa fa-list-ol "></i>&nbsp;<span>Event Views</span></a>
            <a href="create-event.html" class="list-group-item liens"><i class="fa fa-magic "></i>&nbsp;<span>Create Event</span></a>
        </div>
 
        <a href="#demo4" class="list-group-item list-group-item-success lienss" data-toggle="collapse" data-parent="#MainMenu">Messages Management</a>
        <div class="collapse" id="demo4">
            <a href="messages-dashboard.html" class="list-group-item liens"><i class="fa fa-cogs "></i>&nbsp;<span>Message Dashboard</span></a>
            <a href="messages-view.html" class="list-group-item liens"><i class="fa fa-edit "></i>&nbsp;<span>View & Edit Message</span></a>
        </div>
        <a href="#demo5" class="list-group-item list-group-item-success lienss" data-toggle="collapse" data-parent="#MainMenu">Events Templates Management</a>
        <div class="collapse" id="demo5">
            <a href="events-tpltes-view.html" class="list-group-item liens"><i class="fa fa-list-ol "></i>&nbsp;<span>Templates Views</span></a>
        </div>
        <a href="#demo6" class="list-group-item list-group-item-success lienss" data-toggle="collapse" data-parent="#MainMenu">Linkage Management</a>
        <div class="collapse" id="demo6">
 
        </div>
        <a href="#demo7" class="list-group-item list-group-item-success lienss" data-toggle="collapse" data-parent="#MainMenu">Advertisement Management</a>
        <div class="collapse" id="demo7">
            <a href="ads-dashboard.html" class="list-group-item liens"><i class="fa fa-cogs">&nbsp;</i><span>Advertisement Dashboard</span></a>
            <a href="regionDefine.html" class="list-group-item liens"><i class="fa fa-cog">&nbsp;</i><span>Region Management</span></a>
            <a href="AdvertisementRegion.html" class="list-group-item liens"><i class="fa fa-list-ol">&nbsp;</i><span>Ads list per Region</span></a>
            <a href="AdvertisementCountry.html" class="list-group-item liens"><i class="fa fa-list-ol">&nbsp;</i><span>Ads list per Country</span></a>
            <a href="AdvertisementEvent.html" class="list-group-item liens"><i class="fa fa-list-ol">&nbsp;</i><span>Ads list per Event</span></a>
            <a href="FrameAdds.html" class="list-group-item liens"><i class="fa fa-wrench"></i>&nbsp;<span></i>Time Frame of Ads Setting</span></a>
            <a href="DatePaymentFiltration.html" class="list-group-item liens"><i class="fa fa-wrench"></i>&nbsp;<span>Filtration Payment date setting</span></a>
        </div>
        <a href="#demo8" class="list-group-item list-group-item-success lienss" data-toggle="collapse" data-parent="#MainMenu">Shop Management</a>
        <div class="collapse" id="demo8">
            <a href="shop-link.html" class="list-group-item liens"><i class="fa fa-external-link"></i>&nbsp;<span class="">Shop link</span></a>
            <a href="order-list.html" class="list-group-item liens"><i class="fa fa-list-ol"></i>&nbsp;<span class="lien">Order list</span></a>
        </div>
        <a href="#demo9" class="list-group-item list-group-item-success lienss" data-toggle="collapse" data-parent="#MainMenu">Ressource Confirmation Queue</a>
        <div class="collapse" id="demo9">
            <a href="RessourceConf.html" class="list-group-item liens"><i class="fa fa-check"></i>&nbsp;<span class="lien">Unconfirmed resouces list</span></a>
        </div>
        <a href="#demo10" class="list-group-item list-group-item-success lienss" data-toggle="collapse" data-parent="#MainMenu">Newsletter</a>
        <div class="collapse" id="demo10">
            <a href="RessourceConf.html" class="list-group-item liens"><i class="fa fa-cog"></i><span class="lien">Newsletter Management</span></a>
            <a href="send-message.html" class="list-group-item liens"><i class="fa fa-share"></i><span class="lien">Send Message</span></a>
 
        </div>
        <a href="#demo11" class="list-group-item list-group-item-success lienss" data-toggle="collapse" data-parent="#MainMenu">Contest Management</a>
        <div class="collapse" id="demo11">
            <a href="contest-create.html" class="list-group-item liens"><i class="fa fa-magic"></i><span class="lien">Create Contest</span></a>
            <a href="archive-past-contest.html" class="list-group-item liens"><i class="fa fa-folder"></i><span class="lien">Archive past contest</span></a>
 
        </div>
        <a href="#demo12" class="list-group-item list-group-item-success lienss" data-toggle="collapse" data-parent="#MainMenu">Word Format Management</a>
        <div class="collapse" id="demo12">
 
        </div>
        <a href="#demo13" class="list-group-item list-group-item-success lienss" data-toggle="collapse" data-parent="#MainMenu">Bad Word Control</a>
        <div class="collapse" id="demo13">
            <a href="bad-w-management.html" class="list-group-item liens"><i class="fa fa-cog"></i><span class="lien">Badwords Management</span></a>
 
        </div>
        <a href="#demo14" class="list-group-item list-group-item-success lienss" data-toggle="collapse" data-parent="#MainMenu">Sites Options</a>
        <div class="collapse" id="demo14">
            <a href="new-users-notification.html" class="list-group-item liens"><i class="fa fa-cog"></i><span class="lien">Email notification to new users</span></a>
            <a href="bad-w-list.html" class="list-group-item liens"><i class="fa fa-list-ol"></i><span class="lien">Badwords List</span></a>
            <a href="resource-limitation.html" class="list-group-item"><i class="fa fa-list-ol"></i> <span class="lien">Resource limitation</span></a>
        </div>
        <a href="#demo15" class="list-group-item list-group-item-success lienss" data-toggle="collapse" data-parent="#MainMenu">Statistics</a>
        <div class="collapse" id="demo15">
            <a href="statistic.html" class="list-group-item liens"><i class="fa fa-cog"></i><span class="lien">Users statistics</span></a>
        </div>
 
        <!--##########################################################################################################-->
    </div>
</div>
<script src="vendor/jquery/js/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>

Invité · 29/09/2014, 12h41

Bonjour,
une petite explication de ton code ne serait pas superflue.
Et ça nous éviterait des efforts cérébraux.... eux aussi superflus.

**01001111** · 30/09/2014, 02h04

Avec ça?

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#demo1")[0].className+=" in";

**sekaijin** · 02/10/2014, 17h57

j'avoue que là c'est fort
une question javascript sans aucune ligne de javascript

C'est sur que pour obtenir de l'aide c'est la meilleure façon de faire.
A+JYT

**01001111** · 02/10/2014, 20h07

sinon sans jquery c'est:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("demo1").className+=" in";

Le menu accordion

JavaScript

Discussions similaires

Partager

Partager