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

Question

Posted (edited)

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!

Screenshot 2020-04-26 at 10.06.56.png

Edited by oxmoserecords

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 0

You can try this plugin

I usually it for client's sites.

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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
 

Share this post


Link to post
  • 0

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?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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 🙂

Screenshot 2020-05-05 at 19.02.05.png

Screenshot 2020-05-05 at 19.02.58.png

Share this post


Link to post
  • 0

Align category

have you tried above code yet?

Border

Add to Home > Design > Custom CSS

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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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...