Jump to content

Two custom codes that contradict one another

Recommended Posts

Posted

Site URL: https://hawkesburynepeancmp.org/

Hi, I'm new to squarespace and have no previous experience with coding, but I'm good with following instructions. I'm in the process of redesigning a website (mentioned url) in a 'preview template mode'. I've created a timeline using Summary Block List and a blog page by applying some custom code I found online (see image 1). I then tried to add some more custom css to create an accordion style FAQ section on the same page, but every time I would paste the second code (like this one) in the Custom CSS field either one of two things would happen: 

1) the timeline will get out of allignment; or

2) the drop-down functionality of the FAQ section will disappear. 

That makes me think there's some kind of contradiction in the two codes and I don't know anything about codes to spot what the issue is. Any help will be highly appreciated. Thanks in advance!

Kate 

Screenshot 2021-08-13 17.14.22.png

  • Replies 2
  • Views 513
  • Created
  • Last Reply
Posted
On 8/15/2021 at 7:54 AM, tuanphan said:

Hi. Can you send 2 code here? & share link to page in screenshot? We can check easier

Hi Tuan, thanks for getting back to me! 

Here's a link to the website: https://tarantula-garlic-8dak.squarespace.com/config/design

And the codes that I used that I believe are somehow contradicting one another:

Code 1 (custom timeline) - Design-->Custom CSS:

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  }
.sqs-gallery-design-list .summary-content {
  border-left: 2px solid #000000;
  margin-left: -5%;
  padding-bottom: 7%;
  padding-left: 7%;
}
.sqs-gallery-design-list .sqs-gallery-image-container {
  padding-right: 0;
  }
@media screen and (max-width: 640px) {
  .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container, .sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
    width: 10% !important;
  }
  .sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
    width: 90% !important;
  }
}

Code 2 (accordion style FAQ) - Settings-->Advanced-->Code injection: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor','pointer');
  $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
  $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
  $(".markdown-block .sqs-block-content h3").click(function() {
    $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideUp();
    $(".markdown-block .sqs-block-content h3").removeClass('ui-open');
    $(".markdown-block .sqs-block-content h3").addClass('ui-closed');
    $(this).nextUntil("h3").slideDown();
    $(this).toggleClass('ui-closed ui-open');
  });
});
</script>

Code 2 (accordion style FAQ) - Design-->Custom CSS:

.markdown-block p {
  margin-left:1.5em;
}
.markdown-block .ui-closed:before {
  font-family:monospace;
  content:"+ ";
}

.markdown-block .ui-open:before {
  font-family:monospace;
  content:"- ";
}

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.