Problem with expandMode: 'toggle' and 'expandAt' method

[MysticolParticipant]

Hello,

Im using multiple navigation bars with expand=toggle :

\$(document).ready(function () {
		var theme = getDemoTheme();
		
		
		// Create jqxNavigationBar
		
		\$("#jqxNavigationBar1").jqxNavigationBar({ width: 1040,  expandMode: 'toggle', theme: theme });
		var navigationBarDivs1 = \$("#jqxNavigationBar1").children();
            \$(navigationBarDivs1[3]).before("<p> <img src=....> Base de donn&eacute;es </img></p>");
		
		\$("#jqxNavigationBar2").jqxNavigationBar({ width: 1040,  expandMode: 'toggle', theme: theme });
		var navigationBarDivs2 = \$("#jqxNavigationBar2").children();

            \$(navigationBarDivs2[4]).before("<p> <img src=...> R&eacute;pertoires et syst&egrave;mes de fichiers </img> </p>");
            \$(navigationBarDivs2[19]).before("<p> <img src=...> Fichiers PostgreSQL </img> </p>");
			\$(navigationBarDivs2[25]).before("<p> <img src=...> Composants PostgreSQL </img> </p>");

		\$("#jqxNavigationBar3").jqxNavigationBar({ width: 1040,  expandMode: 'toggle', theme: theme });
		var navigationBarDivs3 = \$("#jqxNavigationBar3").children();

            \$(navigationBarDivs3[4]).before("<p> <img src=...> R&egrave;gles li&eacute;es &agrave; la r&eacute;plication  </img> </p>");
            \$(navigationBarDivs3[12]).before("<p> <img src=...> R&egrave;gles de sauvegarde </img> </p>");
			\$(navigationBarDivs3[16]).before("<p> <img src=...> R&egrave;gles d&rsquo;administration </img> </p>");
			\$(navigationBarDivs3[27]).before("<p> <img src=...> Mise en &oelig;uvre du noyau et de la base de donn&eacute;es </img> </p>");
			
		\$("#jqxNavigationBar4").jqxNavigationBar({ width: 1040,  expandMode: 'toggle', theme: theme });
		var navigationBarDivs4 = \$("#jqxNavigationBar4").children();

            \$(navigationBarDivs4[16]).before("<p> <img src=...> R&egrave;gles sur les utilisateurs et groupes OS  </img> </p>");
            \$(navigationBarDivs4[24]).before("<p> <img src=...> Fichiers et r&eacute;pertoires PostgreSQL </img> </p>");
			\$(navigationBarDivs4[48]).before("<p> <img src=...> Comptes utilisateurs de PostgreSQL </img> </p>");
			\$(navigationBarDivs4[56]).before("<p> <img src=...> Autres r&egrave;gles </img> </p>");
		
		
		\$("#jqxNavigationBar5").jqxNavigationBar({ width: 1040,  expandMode: 'toggle', theme: theme });

And i have a jqxtab with items using the expandAt method. It is supposed to link and open the correct navigationBar element when i click on those items. This works but the problem is that the others navigationBar items stay open. So the result is that i can have multiple elements open while im in ‘toggle’ mode. Is this normal and how can i fix it ? Thank You

	\$('.btn-nomm1').click(function () {
     \$('#jqxTabs').jqxTabs('select', 1);
	 \$('#jqxNavigationBar2').jqxNavigationBar('expandAt',0);
		});
		\$('.btn-nomm2').click(function () {
     \$('#jqxTabs').jqxTabs('select', 1);
	 \$('#jqxNavigationBar2').jqxNavigationBar('expandAt',1);
		});

[DimitarParticipant]

Hello Mysticol,

Please have a look at the following example that shows that expandAt works correctly with expandMode: 'toggle': http://jsfiddle.net/Dimitar_jQWidgets/ym6j2ncq/. Make sure you are using the latest version of jQWidgets (3.6.0) in your solution.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[MysticolParticipant]

Thank you for your answer but i would have wanted to see the same example with a second button “expand the second item” to see if it correctly collapses the first one when cliked

[DimitarParticipant]

Hi Mysticol,

Here is the example you requested: http://jsfiddle.net/Dimitar_jQWidgets/ym6j2ncq/2/.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[MysticolParticipant]

Thank You

[Author]

Posts