FAQ custom

Site URL: https://plum-octahedron-jxxd.squarespace.com/faq

Hi everyone,

I am creating a new website via Squarespace platform. The template is Heights.

I have created a beautiful and simple FAQ accordion:
https://plum-octahedron-jxxd.squarespace.com/faq
Password to access is: 1234

I would still like to improve it:

-add "faq categories" between questions as simple title
-align title of category with questions
 on left
-when the user open an answer, the last block of answer seen by the user will close to only display the last opened
-also on some browsers (such as chrome or safari, not mozilla) some line borders appears that surround the question we selected, I would like to remove it

Thi is the code I have used to do it:
 

<h4 align="center">Orders</h4>
<div style="visibility: hidden; position: absolute; width: 0px; height: 0px;">
  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol viewBox="0 0 24 24" id="expand-more">
      <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/>
    </symbol>
    <symbol viewBox="0 0 24 24" id="close">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/>
    </symbol>
  </svg>
</div>

<details>
  <summary>
    How do I know if an item is in stock?
    <svg class="control-icon control-icon-expand" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-more" /></svg>
    <svg class="control-icon control-icon-close" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close" /></svg>
  </summary>
  <p>All products listed are in stock, and our online store is updated in real time to ensure that stock levels are as accurate as possible. Very occasionally, an item may be subject to a stock level error - if this occurs, we will e-mail you to notify you of the unavailable item, and you will not be charged for it.</p>
</details>


<details>
  <summary>
    How do I know you have received my order?    
    <svg class="control-icon control-icon-expand" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-more" /></svg>
    <svg class="control-icon control-icon-close" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close" /></svg>
  </summary>
  <p>
You will receive an immediate e-mail confirmation of each order, stating the items ordered and the total cost, followed by a second mail within the next 24 hours when the order has been processed.</p>
</details>

<details>
  <summary>
    Can I add an item to an order I've already made?   
    <svg class="control-icon control-icon-expand" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-more" /></svg>
    <svg class="control-icon control-icon-close" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close" /></svg>
  </summary>
  <p>
We are unfortunately unable to add items to existing orders.</p>
</details>

 
 
<style>body {
  font-family: "Helvetica Neue", sans-serif;
  background-color: rgba(0,0,0,.1);
}

h2 {
  margin: 20px auto 80px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
  line-height: 1.5;
}

details {
  width: 75%;
  min-height: 5px;
  max-width: 700px;
  padding: 15px 80px 10px 45px;
  margin: 0 auto;
  position: relative;
  font-size: 20px;
  border: 0,5px solid rgba(0,0,0,.1);
  border-radius: 35px;
  box-sizing: border-box;
  transition: all .3s;
}

details + details {
  margin-top: 20px;
}

details[open] {
  min-height: 50px;
  background-color: #fcfcfc;
}

details p {
  color: #0d0c0c;
  font-weight: 400;
}

summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  cursor: pointer;
}

summary:focus {
  outline: none;
  box-shadow: 0 0 0 4px #f6f7f8, 0 0 0 5px black;
}

summary::-webkit-details-marker {
  display: none
}

.control-icon {
  fill: black;
  transition: .3s ease;
  pointer-events: none;
}

.control-icon-close {
  display: none;
}

details[open] .control-icon-close {
  display: initial;
  transition: .3s ease;
}

details[open] .control-icon-expand {
  display: none;
}

details[open] summary:hover::after {
  animation: pulse 1s ease;
}

@keyframes pulse {
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}</style>

How I could do this? 🙂

Thanks a lot for your kind help!

any help? 🙂

Up please 🙂

You can try this plugin

or use this free tool to add FAQ Accordion Dropdown.

Thank you Tuanphan for your help 🙂

If I do not especially want to use the plugin. Do you know what code I should modify for having:
-add "faq categories" between questions as simple title
-align title of category with questions
 on left
-when the user open an answer, the last block of answer seen by the user will close to only display the last opened
-also on some browsers (such as chrome or safari, not mozilla) some line borders appears that surround the question we selected, I would like to remove it
 

Up please 🙂

Could someone help here? Many thanks!

Up please 🙂

If I do not especially want to use the plugin. Do you know what code I should modify for having:
-add "faq categories" between questions as simple title

It seems you solved?
-align title of category with questions
 on left

You mean Orders, Returns Text? If yes, edit

<h4 style="width:75%;text-align:left;">Orders</h4>

-when the user open an answer, the last block of answer seen by the user will close to only display the last opened

-also on some browsers (such as chrome or safari, not mozilla) some line borders appears that surround the question we selected, I would like to remove it

Can you take screenshot?

Thank you tuanphan
I have attached a first screenshot. So the category "Orders" should be aligned with the question.
On the second screenshot, as you see when you click on a question, it has some lines that surround the question (only on some browsers, such as Chrome, Safari). I would like to remove this. And then when the user open an answer, the last block of answer seen by the user will close to only display the last answer opened. Please let me know if something is still unclear 🙂

Align category

have you tried above code yet?

Border

Add to Home > Design > Custom CSS

.code-block * {
    border: none !important;
    outline: none !important;
}