HTML Shipping Rates Template - Accordion

Store Design
,
1

Hi,

I want to create a page with the shipping rates as seen on the example below:

tigas31_0-1677894738086.png
tigas31_0-1677894738086.png1219×952 37.1 KB

Please note that inside this accordion (drop-down) I want to create another small accordion inside it (as highlighted in red) to show the worldwide countries I can ship to).

I have the drop-down created and I want to add the shipping rates inside the “Worldwide Shipping” below:

tigas31_1-1677894821195.png
tigas31_1-1677894821195.png897×308 5.23 KB

This is my code for the accordion drop-down:

<body>
<!-- Begin Accordion Snippet -->
<style><!--
.so-tab {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 25px 0;
  }
  .so-tab label {
    position: relative;
    display: block;
    padding: 0 25px 0 0;
    margin-bottom: 15px;
    line-height: normal;
    cursor: pointer;
  }
  .so-tab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }
  .so-tab-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s;
  }
  /* :checked */
  .so-tab input:checked ~ .so-tab-content {
    max-height: none;
  }
  /* Icon */
  .so-tab label::after {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    -webkit-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
  }
  .so-tab input[type=checkbox] + label::after {
    content: "+";
  }
  .so-tab input[type=radio] + label::after {
    content: "\25BC";
  }
  .so-tab input[type=checkbox]:checked + label::after {
    transform: rotate(315deg);
  }
  .so-tab input[type=radio]:checked + label::after {
    transform: rotateX(180deg);
  }
--></style>
<div class="so-accordion-wrapper">
<div class="so-tab">
<input id="so-tab-1" type="checkbox" name="tabs"> <label for="so-tab-1">Worldwide Shipping</label>
<div class="so-tab-content">
<p>TEXT TEXT TEXT</p>
</div>
</div>
<div class="so-tab">
<input id="so-tab-2" type="checkbox" name="tabs"> <label for="so-tab-2">Returns Policy</label>
<div class="so-tab-content">
<p>TEXT TEXT TEXT</p>
</div>
</div>
</div>
</body>
2

Hi!

To add a small accordion inside the “Worldwide Shipping” section, you can simply add another accordion element within the existing “so-tab-content” div. Here’s an example of how you can achieve this:


   
  

    

       
      

        

| Destination | Rate |
| - | - |
| USA | $10 |
| Canada | $15 |
| UK | $20 |

      

    

    
       
      

        

          - USA

          - Canada

          - UK

In this example, I added two more accordion elements with the class “so-tab” inside the existing “so-tab-content” div. Each accordion element has its own label and content, and is structured in the same way as the original accordion.

For the “Shipping Rates” section, I used a simple HTML table to display the shipping rates for different destinations. You can customize the table as needed for your specific use case.

For the “Countries We Ship To” section, I used an unordered list to list the countries. Again, you can customize the list as needed for your specific use case.

3

@dealnest please note that this doesn’t look like the screenshot that I took from another website.

This is the result from the code that you’ve provided:

tigas31_0-1677928128357.png
tigas31_0-1677928128357.png901×681 20.1 KB

But I want the “Shipping & Returns” page to look exactly like this:

  1. Each section split by a straight line

  2. Accordion as highlighted in the screenshot below: “See what countries we ship to” underlined and bold and when I click on it a a list of countries shows up, in that format.

Note: Please note that I don’t want check boxes for the accordion, I want it to look exactly like on that website.

tigas31_1-1677928224308.png
tigas31_1-1677928224308.png1336×828 31.6 KB

Thank you,

Tiago D.

4

@GemPages @PageFly-Victor @PageFly-Kate @PageFly-Richard Any idea on how to solve this to have the same shipping page as the website shown above?