How to Create the Accordion in Wix
- Administrator
- Nov 13, 2023
- 5 min read
Updated: Jun 11, 2024
The accordion is the most important section on the MaS site. This is where all our programs are shown on the website and it is updated regularly by Operations Support.
This guide shows how to create the accordion in Wix.
Creating New Accordion
1. Copy the section where the current accordion in the homepage is located and paste it onto your target page or site.
2. Turn on the developer mode in your target page or site.
Ensure that the element IDs of the accordion in the editor match the IDs in the code (Check step #3 for the code). If not matched, rename as such: headerBox[#] for the accordion title (Example: headerBox1, headerBox2),
fold[#] for accordion content (Example: fold1, fold2),
arrowRight[#] for arrow down, and arrowDown[#] for arrow up (Example: arrowRight1, arrowDown1).
Important: Ensure that none of the IDs are duplicated.
3. Once every element (header box, fold, arrow up, arrow down) is renamed and matched, paste the sample code below. This code is responsible for the closing and opening of the accordion according to the user's actions.
import wixWindowFrontend from 'wix-window-frontend'; $w('#fold1').collapse(); $w('#fold2').collapse(); $w('#fold3').collapse(); $w('#fold4').collapse(); $w('#fold5').collapse(); $w('#fold6').collapse(); $w('#fold7').collapse(); $w('#fold8').collapse(); $w('#fold9').collapse(); $w('#fold10').collapse(); $w('#fold11').collapse(); $w('#fold12').collapse(); // $w('#arrowDown1').show(); // $w('#arrowRight1').hide(); function toggleFold(index) { let $fold = $w('#fold' + index); let $arrowDown = $w('#arrowDown' + index); let $arrowRight = $w('#arrowRight' +
index); // $fold.scrollTo(100, 500); if ($fold.collapsed) { $fold.expand(500); $arrowDown.show(); $arrowRight.hide(); } else { $fold.collapse(500); $arrowDown.hide(); $arrowRight.show(); } // collapse the other folds [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] .filter(idx => idx !== index) .forEach(idx => { $w('#fold' + idx).collapse();
$w('#arrowDown' + idx).hide(); $w('#arrowRight' + idx).show(); }) }
4. Edit the code accordingly such that it matches the number of dropdowns in your accordion. Use this as a basis:
5. Activate the Click function so that the content shows up when you click the header title. To do this, click the header title (Example: ID: headerBox1) then under "Event Handlers" at the bottom right, click "onClick( )".
A function will show up in the code box.
Edit the code so that it looks like this:
Click Run to go to Preview mode and test if the dropdown effect is working. Repeat this step for the up arrow and down arrow so that this function is called when you click on them. Repeat steps for all accordion dropdowns.
6. Once all functions are set, go to preview mode (both desktop and mobile) and test that all of the dropdowns are working. Adjust spacing and format accordingly. Turn on the Wix toolbar on the upper right of screen and use this as basis:
Desktop:
header height = 58
Mobile:
header height = 50
7. To add the refocus and scroll effect, go to Settings > Custom Code > Add Custom Code. Under "Paste the code snippet here:", paste this code:
<script>
$(document).ready(function() {
$(".CohWsy.wixui-column-strip").click(function(){
$(this).next().siblings().removeClass("active");
$(this).next().toggleClass("active");
});
$('.Oqnisf section:nth-child(even), .Oqnisf section:nth-child(even) .MazNVa').on('click', function() {
var data = $(this).offset().top;
$("body,html").animate({ scrollTop: data }, 500);
});
});
</script>
8. Name the code under "Name".
9. Under "Add Code to Pages", click "Choose Specific Pages" and select the target page where the new accordion is located.
10. Place the code in "Body - Start".
11. Place this code in the header:
<style>
.CohWsy.wixui-column-strip {
max-width: 1000px !important;
margin: 0 auto !important;
}
@media screen and (max-width:567px){
button.wixui-button {
white-space: nowrap;
width: 100%;
padding-right: 40px !important;
}
.MazNVa.wixui-image.rYiAuL {
width: 15px !important;
height: 15px !important;
}
div#comp-lo5pp76t {
margin: 0px;
}
.form-all {
margin-top: 0;
}
div#comp-lnvnnjwu {
margin-top: 5px;
}
}
section#comp-lnvep3z2 {
width: 100% !important;
}
/*.comp-lnve31jg div section:nth-child(odd) {
height: 0px;
width:100%;
transition: .5s;
left: auto !important;
min-width: 450px !important;
margin: auto !important;
position: relative;
top: 0 !important;
bottom: auto !important;
visibility:hidden !important;
}
.comp-lnve31jg div section:nth-child(odd).active {
height: 100%;
transition: .5s;
left: auto !important;
min-width: 450px !important;
margin: auto !important;
visibility:visible !important;
}*/
/*.comp-lnve31jg div section:nth-child(odd) div {
justify-content: center !important;
align-items: center;
}
.comp-lnve31jg div section:nth-child(odd) div#comp-lnvgncd8, .comp-lnve31jg div section:nth-child(odd) div#comp-lnvephl4 {
margin: auto;
}
.comp-lnve31jg div section:nth-child(odd) div#comp-lnvfknru1, .comp-lnve31jg div section:nth-child(odd) div#comp-lnvnow16 {
margin: auto !important;
}*/
div#WIX_ADS {
visibility: hidden;
}
#site-root {
top: 0;
}
</style>
Creating a New Dropdown
Watch the video to add a dropdown in an already existing accordion.
Creating Multiple Accordions Separated by Sections
1. Follow steps 1-5 in the Creating New Accordion tutorial.
2. To add the scroll effect, add this code snippet (refer to steps 6-8 in the Creating New Accordion tutorial). Place the code in "Body - End":
<script>
$(document).ready(function() {
$(".CohWsy.wixui-column-strip").click(function(){
$(this).next().siblings().removeClass("active");
$(this).next().toggleClass("active");
});
var b = new Array();
$(".Oqnisf section:nth-child(even)").each(function(){
var alloffset = $(this).offset().top;
b.push(alloffset);
});
$(".Oqnisf section").each(function(){
var attr = $(this).index();
var prev_index = $(this).attr("position",attr);
});
var first_last_pos = $("#comp-losbjw9l section:last-child").attr("position");
$("#comp-losbm8tx section").each(function(){
var prev = $(this).attr("position");
var final = parseInt(prev) + parseInt(first_last_pos);
$(this).attr("position",final);
});
var second_last_pos = $("#comp-losbm8tx section:last-child").attr("position");
$("#comp-losbqxbi section").each(function(){
var prev = $(this).attr("position");
var final = parseInt(prev) + parseInt(second_last_pos);
$(this).attr("position",final);
});
var third_last_pos = $("#comp-losbqxbi section:last-child").attr("position");
$("#comp-losbsg6m section").each(function(){
var prev = $(this).attr("position");
var final = parseInt(prev) + parseInt(third_last_pos);
$(this).attr("position",final);
});
$('.Oqnisf section:nth-child(even), .Oqnisf section:nth-child(even) .MazNVa').on('click', function() {
var a = $(this).prev("section");
var data = $(this).attr("position");
var prev_index = $(this).prev().attr("position");
var index = prev_index / 2;
if(a.length==0){
var index = (data - 1) / 2;
var offset = $(this).offset().top;
$("body,html").animate({ scrollTop: b[index] }, 500);
}
else{
$("body,html").animate({ scrollTop: b[index] }, 500);
}
});
});
</script>
3. Edit above code so that the section IDs are matched to the accordion. The section IDs to be edited are highlighted in different colors. Yellow highlight for the section ID of first accordion section. Green highlight for the section ID of second accordion section. Blue highlight for the section ID of third accordion section. Red highlight for the section ID of fourth accordion section. To locate the section ID of your accordion, publish the site. Go to the live version of your page. Right click your mouse and click "Inspect Element". Watch the tutorial below to locate the section IDs.
Troubleshooting
The content is not showing when I click the dropdown.
1. Go to developer mode and ensure that the element IDs of the accordion match the IDs in the code. If not matched, rename as such: headerBox[#] for the accordion title (Example: headerBox1, headerBox2); fold[#] for the accordion content (Example: fold1, fold2); arrowRight[#] for down arrow (Example: arrowRight1, arrowRight2); and arrowDown[#] for up arrow (Example: arrowDown1, arrowDown2)
2. Ensure that the click function is activated for the header titles. Refer to step #5 in Creating New Accordion tutorial.
The scroll effect and refocus effect are not working.
1. Ensure that the code for scroll effect and refocus effect is added on the custom code. Refer to step 7-10 in Creating New Accordion tutorial. Make sure that the code is added in the right page.
2. If effects are not working properly, try adding the code in "Body - End" instead of "Body - Start".
