Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Victoria2020

Question

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 post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

You can use this tool  or IXstudio tool to create accordions. It will be easier.

3 answers to this question

Recommended Posts

  • 0

Whats the password?

I have an accordion plugin on my site, but I am not exactly sure what you are trying to do without seeing your page, so I am not sure if it will work.

Edited by rwp
Link to post
  • 0

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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...