Hi, I have created an expanding and collapsing menu and it totally works fine, but my client has requested that only one section be open at a time. Is there a way of adding additional code so that when I click to open one section it will close the others if they are open? Any help would be much appreciated!
Below is my code which is currently working:
$w.onReady( function () {
$w( "#headerBox1" ).onClick((event) => {
if ($w( ‘#communitySec1’ ).collapsed) {
$w( ‘#communitySec1’ ).expand();
} else {
$w( ‘#communitySec1’ ).collapse();
}
});
$w( "#headerBox1R" ).onClick((event) => {
if ($w( ‘#communitySec1’ ).collapsed) {
$w( ‘#communitySec1’ ).expand();
} else {
$w( ‘#communitySec1’ ).collapse();
}
});
$w( "#headerBox2" ).onClick((event) => {
if ($w( ‘#homesSec1’ ).collapsed) {
$w( ‘#homesSec1’ ).expand();
} else {
$w( ‘#homesSec1’ ).collapse();
}
});
$w( "#headerBox2R" ).onClick((event) => {
if ($w( ‘#homesSec1’ ).collapsed) {
$w( ‘#homesSec1’ ).expand();
} else {
$w( ‘#homesSec1’ ).collapse();
}
});
$w( "#headerBox3" ).onClick((event) => {
if ($w( ‘#kiwiSec1’ ).collapsed) {
$w( ‘#kiwiSec1’ ).expand();
} else {
$w( ‘#kiwiSec1’ ).collapse();
}
});
$w( "#headerBox3R" ).onClick((event) => {
if ($w( ‘#kiwiSec1’ ).collapsed) {
$w( ‘#kiwiSec1’ ).expand();
} else {
$w( ‘#kiwiSec1’ ).collapse();
}
});
$w( "#headerBox4" ).onClick((event) => {
if ($w( ‘#locationSec1’ ).collapsed) {
$w( ‘#locationSec1’ ).expand();
} else {
$w( ‘#locationSec1’ ).collapse();
}
});
$w( "#headerBox4R" ).onClick((event) => {
if ($w( ‘#locationSec1’ ).collapsed) {
$w( ‘#locationSec1’ ).expand();
} else {
$w( ‘#locationSec1’ ).collapse();
}
});
$w( "#headerBox5" ).onClick((event) => {
if ($w( ‘#enquireSec1’ ).collapsed) {
$w( ‘#enquireSec1’ ).expand();
} else {
$w( ‘#enquireSec1’ ).collapse();
}
});
$w( "#headerBox5R" ).onClick((event) => {
if ($w( ‘#enquireSec1’ ).collapsed) {
$w( ‘#enquireSec1’ ).expand();
} else {
$w( ‘#enquireSec1’ ).collapse();
}
});
$w( "#headerBox5" ).onClick((event) => {
if ($w( ‘#NZbuildSec1’ ).collapsed) {
$w( ‘#NZbuildSec1’ ).expand();
} else {
$w( ‘#NZbuildSec1’ ).collapse();
}
});
$w( "#headerBox5R" ).onClick((event) => {
if ($w( ‘#NZbuildSec1’ ).collapsed) {
$w( ‘#NZbuildSec1’ ).expand();
} else {
$w( ‘#NZbuildSec1’ ).collapse();
}
});
});