[JQUERY] Links in content accordion
Ik ben geen javascript wonder en dus al helemaal geen jquery genie, ik ben er toch in geslaagd met wat copy en paste werk een accordion (linker "sidebar") te maken.
Nu de content in de accordion van 4 delen wordt uit een database gehaald, er zitten in sommige delen links en wanneer je op die links klikt sluit de accordion weer.
Wat ik dus zou willen is dat de link gewoon opent en niet als toggle voor de accordion wordt gebruikt, kan er iemand mij hierbij helpen?
Mvg
Paradox
PS: De link met het probleem http://bit.ly/qeLOO8
Edit
Huidige code accordion
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="subNav" class="basic ui-accordion selected">
<a class="selected" href="#nieuws">nieuws</a>
<div id="nieuws" style="display: block;">
<span class="tweet">Tussen 16 & 31 juli nemen wij onze welverdiende zomervakantie. We zijn er terug op maandag 01 augustus. ;)
<br>-</span><span class="tweet">>>> Sweaters & Hoodies Days op 13 - 14 -15 juli - 25% op alle te bedrukken sweaters uit onze cataloog <<<
<br>-</span><span class="tweet">Maand juni is POLO MAAND
--- > 22 - 23 - 24 juni - 25% op alle te bedrukken polo's uit onze cataloog.
</span> </div>
<a href="#cataloog">cataloog</a>
<div style="display: none;" id="cataloog">
<a target="" title="catalooppagina" href="http://www.emf-deinze.be/cataloog.php"><img src="img/other/749364765754036.png"></a><br style="display: none;"> </div>
<a href="#promotie">promotie</a>
<div style="display: none;" id="promotie">
<a target="" title="" href="http://www.emf-deinze.be/?page=textiel"><img src="img/other/30586855193802.png" width="175"></a><br style="display: none;">De promotie van deze maand,<br>op 13 - 14 - 15 juli zijn alle <br>Hoodies uit onze cataloog<br>aan<font size="3"> - 25 % </font><br> </div>
<a href="#offerte">offerte</a>
<div style="display: none;" id="offerte">
<a target="" title="" href="http://www.emf-deinze.be/?page=offerte"><img src="img/other/36530288889940.png" width="169"></a><br style="display: none;">ga verder voor uw<br>
offerte-formulier </div>
</div>
<a class="selected" href="#nieuws">nieuws</a>
<div id="nieuws" style="display: block;">
<span class="tweet">Tussen 16 & 31 juli nemen wij onze welverdiende zomervakantie. We zijn er terug op maandag 01 augustus. ;)
<br>-</span><span class="tweet">>>> Sweaters & Hoodies Days op 13 - 14 -15 juli - 25% op alle te bedrukken sweaters uit onze cataloog <<<
<br>-</span><span class="tweet">Maand juni is POLO MAAND
--- > 22 - 23 - 24 juni - 25% op alle te bedrukken polo's uit onze cataloog.
</span> </div>
<a href="#cataloog">cataloog</a>
<div style="display: none;" id="cataloog">
<a target="" title="catalooppagina" href="http://www.emf-deinze.be/cataloog.php"><img src="img/other/749364765754036.png"></a><br style="display: none;"> </div>
<a href="#promotie">promotie</a>
<div style="display: none;" id="promotie">
<a target="" title="" href="http://www.emf-deinze.be/?page=textiel"><img src="img/other/30586855193802.png" width="175"></a><br style="display: none;">De promotie van deze maand,<br>op 13 - 14 - 15 juli zijn alle <br>Hoodies uit onze cataloog<br>aan<font size="3"> - 25 % </font><br> </div>
<a href="#offerte">offerte</a>
<div style="display: none;" id="offerte">
<a target="" title="" href="http://www.emf-deinze.be/?page=offerte"><img src="img/other/36530288889940.png" width="169"></a><br style="display: none;">ga verder voor uw<br>
offerte-formulier </div>
</div>
Js
Code (php)
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
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
jQuery().ready(function(){
// simple accordion
jQuery('#list1a').accordion();
jQuery('#subNav').accordion({
autoheight: false,
navigation: true
});
// bind to change event of select to control first and seconds accordion
// similar to tab's plugin triggerTab(), without an extra method
var accordions = jQuery('#subNav');
jQuery('#switch select').change(function() {
accordions.accordion("activate", this.selectedIndex-1 );
});
jQuery('#close').click(function() {
accordions.accordion("activate", -1);
});
jQuery('#switch2').change(function() {
accordions.accordion("activate", this.value);
});
jQuery('#enable').click(function() {
accordions.accordion("enable");
});
jQuery('#disable').click(function() {
accordions.accordion("disable");
});
jQuery('#remove').click(function() {
accordions.accordion("destroy");
wizardButtons.unbind("click");
});
});
// simple accordion
jQuery('#list1a').accordion();
jQuery('#subNav').accordion({
autoheight: false,
navigation: true
});
// bind to change event of select to control first and seconds accordion
// similar to tab's plugin triggerTab(), without an extra method
var accordions = jQuery('#subNav');
jQuery('#switch select').change(function() {
accordions.accordion("activate", this.selectedIndex-1 );
});
jQuery('#close').click(function() {
accordions.accordion("activate", -1);
});
jQuery('#switch2').change(function() {
accordions.accordion("activate", this.value);
});
jQuery('#enable').click(function() {
accordions.accordion("enable");
});
jQuery('#disable').click(function() {
accordions.accordion("disable");
});
jQuery('#remove').click(function() {
accordions.accordion("destroy");
wizardButtons.unbind("click");
});
});
Gewijzigd op 06/07/2011 18:45:27 door Wouter De Schuyter
ziet er leuk uit je kan misschien nog even naar je site kijken vanuit een andere browser want als ik hem bekijk vanuit IE 9 normaal is hij 'goed' qua opmaak, design maar als ik dit vanuit firefox probeer klopt het niet hellemaal.. en als ik het in een iets andere probeer word het hele menu (rechts onder) hellemaal onder elkaar gezet links...
@on
wat is de code die je ervoor gebruikt ?
Offtopic: Ik werk op een mac en heb nog niet de mogelijkheid gehad de website te testen in IE, in Firefox, Chrome & Safari zou die er goed uit moeten zien. Zelf vind ik de site niet echt mooi maar ik doe gewoon wat er me gevraagd word.
Ontopic: Even mn startpost geupdate ;)
@Paradox, kijk eens naar: http://docs.jquery.com/UI/Accordion#option-navigation
Verder is dit een functie die is ingebouwd in jQuery UI. Kijk daar ook eens naar (is beter om deze te gebruiken): http://jqueryui.com/demos/accordion/
Iemand die me kan helpen?
Dit is mn js code
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
jQuery().ready(function(){
$(".basic").accordion({
navigation: true,
autoheight: false,
event: 'mouseover'
});
});
$(".basic").accordion({
navigation: true,
autoheight: false,
event: 'mouseover'
});
});
En dit mn html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="subNav" class="basic ui-accordion selected">
<a class="" href="#nieuws">nieuws</a>
<div id="nieuws" style="display: none;">
<span class="tweet">Tussen 16 & 31 juli nemen wij onze welverdiende zomervakantie. We zijn er terug op maandag 01 augustus. ;)
<br>-</span><span class="tweet">>>> Sweaters & Hoodies Days op 13 - 14 -15 juli - 25% op alle te bedrukken sweaters uit onze cataloog <<<
<br>-</span><span class="tweet">Maand juni is POLO MAAND
--- > 22 - 23 - 24 juni - 25% op alle te bedrukken polo's uit onze cataloog.
</span> </div>
<a class="" href="#cataloog">cataloog</a>
<div style="display: none; height: auto; overflow: hidden;" id="cataloog">
<a target="" title="catalooppagina" href="http://www.emf-deinze.be/cataloog.php"><img src="img/other/749364765754036.png"></a><br style="display: none;"> </div>
<a href="#promotie">promotie</a>
<div style="display: none;" id="promotie">
<a target="" title="" href="http://www.emf-deinze.be/?page=textiel"><img src="img/other/30586855193802.png" width="175"></a><br style="display: none;">De promotie van deze maand,<br>op 13 - 14 - 15 juli zijn alle <br>Hoodies uit onze cataloog<br>aan<font size="3"> - 25 % </font><br> </div>
<a class="selected" href="#offerte" onclick="window.location='?page=offerte#offerte'">offerte</a>
<div style="display: block; height: auto; overflow: hidden;" id="offerte">
<a target="" title="" href="http://www.emf-deinze.be/?page=offerte#offerte" onclick="window.location='?page=offerte#offerte'"><img src="img/other/36530288889940.png" width="169"></a><br style="display: none;">ga verder voor uw<br>
offerte-formulier </div>
</div>
<a class="" href="#nieuws">nieuws</a>
<div id="nieuws" style="display: none;">
<span class="tweet">Tussen 16 & 31 juli nemen wij onze welverdiende zomervakantie. We zijn er terug op maandag 01 augustus. ;)
<br>-</span><span class="tweet">>>> Sweaters & Hoodies Days op 13 - 14 -15 juli - 25% op alle te bedrukken sweaters uit onze cataloog <<<
<br>-</span><span class="tweet">Maand juni is POLO MAAND
--- > 22 - 23 - 24 juni - 25% op alle te bedrukken polo's uit onze cataloog.
</span> </div>
<a class="" href="#cataloog">cataloog</a>
<div style="display: none; height: auto; overflow: hidden;" id="cataloog">
<a target="" title="catalooppagina" href="http://www.emf-deinze.be/cataloog.php"><img src="img/other/749364765754036.png"></a><br style="display: none;"> </div>
<a href="#promotie">promotie</a>
<div style="display: none;" id="promotie">
<a target="" title="" href="http://www.emf-deinze.be/?page=textiel"><img src="img/other/30586855193802.png" width="175"></a><br style="display: none;">De promotie van deze maand,<br>op 13 - 14 - 15 juli zijn alle <br>Hoodies uit onze cataloog<br>aan<font size="3"> - 25 % </font><br> </div>
<a class="selected" href="#offerte" onclick="window.location='?page=offerte#offerte'">offerte</a>
<div style="display: block; height: auto; overflow: hidden;" id="offerte">
<a target="" title="" href="http://www.emf-deinze.be/?page=offerte#offerte" onclick="window.location='?page=offerte#offerte'"><img src="img/other/36530288889940.png" width="169"></a><br style="display: none;">ga verder voor uw<br>
offerte-formulier </div>
</div>
Iemand die me wat kan helpen?
Concreet: de accordion mag niet veranderen als ik over een link in de openstaande sectie ga..
Link: http://bit.ly/qeLOO8
Code (php)
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
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
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="Stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script>
$(function() {
$( "#accordion" ).accordion({
event: 'mouseover'
});
});
</script>
<div class="demo">
<div id="accordion">
<h3><a href="#">Nieuws</a></h3>
<div>
<span class="tweet">Tussen 16 & 31 juli nemen wij onze welverdiende zomervakantie. We zijn er terug op maandag 01 augustus. ;)
<br>-</span><span class="tweet">>>> Sweaters & Hoodies Days op 13 - 14 -15 juli - 25% op alle te bedrukken sweaters uit onze cataloog <<<
<br>-</span><span class="tweet">Maand juni is POLO MAAND
--- > 22 - 23 - 24 juni - 25% op alle te bedrukken polo's uit onze cataloog.
</span>
</div>
<h3><a href="#">Cataloog</a></h3>
<div>
<a target="" title="cataloogpagina" href="http://www.emf-deinze.be/cataloog.php"><img src="http://www.emf-deinze.be/img/other/749364765754036.png"></a><br style="display: none;">
</div>
<h3><a href="#" onclick="window.location='?page=offerte#offerte'">Offerte</a></h3>
<div>
<a target="" title="" href="http://www.emf-deinze.be/?page=textiel"><img src="http://www.emf-deinze.be/img/other/30586855193802.png" width="175"></a><br style="display: none;">De promotie van deze maand,<br>op 13 - 14 - 15 juli zijn alle <br>Hoodies uit onze cataloog<br>aan<font size="3"> - 25 % </font><br>
</div>
<h3><a href="#">Offerte</a></h3>
<div>
<a target="" title="" href="http://www.emf-deinze.be/?page=offerte#offerte" onclick="window.location='?page=offerte#offerte'"><img src="http://www.emf-deinze.be/img/other/36530288889940.png" width="169"></a><br style="display: none;">ga verder voor uw<br>
offerte-formulier
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script>
$(function() {
$( "#accordion" ).accordion({
event: 'mouseover'
});
});
</script>
<div class="demo">
<div id="accordion">
<h3><a href="#">Nieuws</a></h3>
<div>
<span class="tweet">Tussen 16 & 31 juli nemen wij onze welverdiende zomervakantie. We zijn er terug op maandag 01 augustus. ;)
<br>-</span><span class="tweet">>>> Sweaters & Hoodies Days op 13 - 14 -15 juli - 25% op alle te bedrukken sweaters uit onze cataloog <<<
<br>-</span><span class="tweet">Maand juni is POLO MAAND
--- > 22 - 23 - 24 juni - 25% op alle te bedrukken polo's uit onze cataloog.
</span>
</div>
<h3><a href="#">Cataloog</a></h3>
<div>
<a target="" title="cataloogpagina" href="http://www.emf-deinze.be/cataloog.php"><img src="http://www.emf-deinze.be/img/other/749364765754036.png"></a><br style="display: none;">
</div>
<h3><a href="#" onclick="window.location='?page=offerte#offerte'">Offerte</a></h3>
<div>
<a target="" title="" href="http://www.emf-deinze.be/?page=textiel"><img src="http://www.emf-deinze.be/img/other/30586855193802.png" width="175"></a><br style="display: none;">De promotie van deze maand,<br>op 13 - 14 - 15 juli zijn alle <br>Hoodies uit onze cataloog<br>aan<font size="3"> - 25 % </font><br>
</div>
<h3><a href="#">Offerte</a></h3>
<div>
<a target="" title="" href="http://www.emf-deinze.be/?page=offerte#offerte" onclick="window.location='?page=offerte#offerte'"><img src="http://www.emf-deinze.be/img/other/36530288889940.png" width="169"></a><br style="display: none;">ga verder voor uw<br>
offerte-formulier
</div>
</div>
</div>
Ik heb nu juist het onderstaande stukje code gekopieerd en het id veranderd maar het werkt dus nog steeds niet..
Weet jij waarom?
Code (php)
1
2
3
4
5
2
3
4
5
$(function() {
$( "#accordion" ).accordion({
event: 'mouseover'
});
});
$( "#accordion" ).accordion({
event: 'mouseover'
});
});