Hi guys
I want to create an accordian menu for my site and after some google searching found this link.
How would i go about implementing this into my site?? I see the source code available, but am unsure of the correct procedure to integrate it into my site, i am aware of the custom code feature, but i cant get it to work so it displays like the link above (before css customisations).
Any help here would be great.
Thanks
put this script in your “before end body” custom code area:
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
then follow the example on that page you linked: Accordion | jQuery UI
Hi PixelGeek
Thanks for the reply.
I have a link below showing a screenshot of my custom code page, with the header filled in and end body filled in.
have i done it correctly?
because its not showing up on my design preview mode. also is it possible to do this to a specific page only in your site? Like page2 instead of the home page??
thanks.
Hi, in your screenshot, in the head section, delete lines 2,3 and the script code on lines 5-9. You do not put the script code in the head section.
Your code in the bottom section in the before body section, the code on lines 1-6 are ok. Delete the rest of the lines from lines 8 to the end of the before body section. You need to take those lines from line 8 to the end, and paste that into an HTML embed widget in the design mode of your site. So you just pick a place where you want the accordion to appear, and then past those div sections into an html embed widget on your page. Then after changes are automatically saved in design mode, publish your page and see how it looks…
The javascript files that you are linking to in the body section, is done for the whole site currently. If you plan to host your site on some other server than webflow (i.e. you plan to export the site) then you can edit your html files after export and remove the javascript links and css code you added, for those pages that do not need these scripts loaded. Just keep in mind, once you export a site, you cannot import back into webflow.
Cheerios
Hi cyberdave
thanks for the detailed response. i decided to create a blank document and just insert a section and a container within.
i then added a html embed widget with the correct body code.
i then published the site, and when i run it, the accordian menu is takes up 3/4 of the width of the browser screen and is fixed to the left of the screen.
please visit learningtest.webflow.com/test to see it in action.
how do i get it to stay within the confines of a container of column??
thanks
bump.
really would appreciate any help here…
i have added a screenshot of the problem below.
the red represents the container which i embedded the code into.
your H3 tags have a CSS property of:
right:420px;
remove that and you should be good =)
yes that worked!
now to do the css styling. i guess i have to export the site, and edit the jquery-ui.css file manually to get the look i am after.
You can also experiment online with the jqueryui themeroller to get a look you want… On the page in link below, you can edit the colors on the left and generate your own css changes… just play around with the section colors and you can get a look you like:
Cheerios
yes i like that cyberdave! very useful.
@cyberdave, or anyone else who might know the answer…Is it possible to integrate the output of the JQueryUI ThemeRoller you mentioned into one’s webflow project? I followed this thread to set up my accordion and then I played with the themeroller to manipulate the style; now I have the downloaded themeroller result, but I am at a loss for what to do with the generated css output so that it applies to my webflow project (the output consists of many files too). Can you shed some light on that?
I made an accordion from this : https://preview.webflow.com/preview/demokit?preview=72388b288a26874be319ca1f7412d4eb
Look for the page “Accordion”.
One thing thought…you can only deploy and retract the div by clicking on the link the div is connected to. So if you click on “link 1” and the div expands to show the content…if you click on “link 2” the previous div on “link 1” won’t retract as the second div expands.
So it’s not a real accordion but…a close one.
@StevenP, I love it…this would be perfect for my scenario, but I am not understanding how you did this yet. For your variation of this, where did you specify the click events and behaviors? Is this something you had to add custom code for as well?
Nope, no custom code. It was all made natively in Webflow.
Here you’ll find my accordion. I styled it a bit more adding an icon telling the user that the bar is collapsible. You’ll find the accordion under the heading of “De vanligaste frågorna om vatten och radon”: Radon & Dricksvatten
I’ll explain in detail how it was made (It’s actually quite simple):
Create a Div Block. Give it a class of Accordion Super Wrapper. If you are going to have multiple accordions stacked under each other, this is the Wrapper that will house them.
Create a Div Block and give it a class of Accordion Wrapper.
Create a Div Block, place it inside the Accordion Wrapper. Give it a class of Accordion Heading Wrap.
Style it:
padding left and right: 10px
padding top and bottom: 20px
Create a Link Block, place it inside the Accordion Heading Wrap. Give it a class of Accordion Icon Wrap. You want to make the icon clickable, hence the Link Block.
Style it:
float: left
width: 10%
text-align: center
Add an image widget inside the Accordion Icon Wrap. Upload the icon of your choice.
I also gave it some animation on hover. On hover, I’ve set a height decrease of 5px and 400ms transition.
Add a Link Block inside Accordion Heading Wrap. Give it a class of Accordion Heading Container.
Style it:
display: inline-block
float: left:
width: 90%
Add a heading inside the Accordion Heading Container. Give it a class of your choice.
Style it:
margin-left: 15px
padding-left: 25px
position: relative
z-index: 5 (to prevent flashing on icon hover)
display: in-line block
text-align: left
Create a Div block, place it inside the Accordion Wrapper-div. Give it a class of Accordion Content.
Style it:
display: block
overflow: hidden
height: auto (auto so you can see the div when you add the content inside it. Later it’s going to be changed to “0px”)
Place all necessary elements you want in the Accordion Content; anything from text, images etc.
Once you’re done, change height to “0px”
In this example, I just have a paragraph.
Most important styling if the paragraph is:
padding top-bottom-left-right: 20px
margin-bottom: 20px
Select Accordion Wrapper. Add interaction of “Click”. Leave Initial Apperance untouched.
Add these settings to the interaction:
You’re Done.
(It’s late over here in Sweden and I had a few soccer games played, a few beers and a few hours of sauna and jacuzzi today, so I hope I got this explained the right way…
@StevenP this is brilliant…but i must be missing something. I think I followed everything (only making tweaks for the styling I needed), but the content below the expanding item doesn’t move. Right now the content that gets exposed on-click just overlaps everything below it and I can’t figure out what setting makes the stuff below move up/down along with the hidden/exposed content.
Do you got a preview-link so I can fiddle around to see what’s missing?
Yes. You can see the accordion only in mobile views of the homepage right now. It is in the footer. https://preview.webflow.com/preview/bigfooter-pubtest?preview=86aadc4f990ededa18e565e234b20512
Allright, I found the problem. On the Accordion Wrapper, you’ve set a fixed height of 60px. That’s preventing the Accordion Content to expand properly as it’s designated space to expand within is just 60px. Remove the 60px from the Accordion Wrapper and you’ll good to go!
Oh yay! Thank you for sharing all of this knowledge and helping me out! So glad to know this type of accordion can be built right in webflow.
Glad to help, you’re welcome! 