Jump to content

Multiple Accordians/Drop downs in the same section: Code and ID creation help

Recommended Posts

Site URL: https://bulldog-alpaca-kydk.squarespace.com/config/design/custom-css

I've trawled a few of the Accordian and drop down threads but struggling to find a fix. 

I have been able to create one accordian drop down with multiple sections but when I try to add a second or third it starts to play up.

 

The website will have three drinks flavours in the same section. Three Images, three descriptions and under each of these images there will be a drop down box listing the ingredients, storage and fact base info about the plant ingredients.

 

I have been able to successfully create the first but thwne i copy and mimic the code under the second image it ceasing to work.

 

I believe I need a specific ID code built into each code injection and markdown section and then in the CSS so it identifies each one, but I am very very new to coding and unsure how to insert and ID.

Code currently used which has been successful for one (This was taken from an online tutorial):

CSS:

.markdown-block h2 {
font-size: 22px;
background: hsl(323, 27%, 78%);
color: #FFFFFF;margin: 20px 0px;
}

.dropdown {
margin: 20px 0px;
}

.box {
padding: 10px;
outline: hsl(323, 27%, 78%) solid 3px;
outline-offset: 3px;
margin: auto 0px;
}

Code Injection

<script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

$(document).ready(function(){
$('.markdown-block .sqs-block-content .dropdown').css('cursor','pointer');
$(".markdown-block .sqs-block-content .dropdown").nextUntil(".dropdown").slideToggle();
$(".markdown-block .sqs-block-content .dropdown").click(function() {
$(this).nextUntil(".dropdown").slideToggle();
});
});
</script>

Markdown Block

 

 

<h2 class="dropdown box">This is the question<span style="text-align:right; float: right;">&darr;</span></h2>

> <p>*This is paragraph one of the answer.*</p>

> <div class ="dropdown"><p>*This is the second question*<span style="text-align:right; float: right;">&darr;</span></p></div>

>> <p>*This is a second dropdown.*</p>

> <div class ="dropdown"><p>*This is the third question*<span style="text-align:right; float: right;">&darr;</span></p></div>

>><p>*This is a third dropdown.*</p>

</br>

 

Any advise would be INCREDIBLE.

 

Warmest regards V

 

Link to comment
  • Replies 3
  • Views 428
  • Created
  • Last Reply

Hi,

Please share the page you used this accordion and also please check this FREE NO-Coding accordion plugin. You can make any design you like in 30 Seconds.

Demo: https://www.sqsp.ixstudio.net/faq and download link is here.

Let me know please if you have any questions.

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.