oxmoserecords Posted April 26, 2020 Share Posted April 26, 2020 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/faqPassword 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! Link to comment
tuanphan Posted April 27, 2020 Share Posted April 27, 2020 You can try this plugin or use this free tool to add FAQ Accordion Dropdown. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
oxmoserecords Posted April 28, 2020 Author Share Posted April 28, 2020 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 Link to comment
oxmoserecords Posted May 2, 2020 Author Share Posted May 2, 2020 Could someone help here? Many thanks! Link to comment
tuanphan Posted May 5, 2020 Share Posted May 5, 2020 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
oxmoserecords Posted May 5, 2020 Author Share Posted May 5, 2020 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 🙂 Link to comment
tuanphan Posted May 7, 2020 Share Posted May 7, 2020 Align category have you tried above code yet? Border Add to Home > Design > Custom CSS .code-block * { border: none !important; outline: none !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.