Shopify themes, liquid, logos, and UX
Hey there,
I have an accordion for a pricing table in a test page that I'd like to link to with anchor links. It expands/collapses the div when clicked.
Currently, my table is set up like this:
<div class="grid__item-inner grid__item-inner--html">
<span class="scroll-anchor" id="nailcare-id"></span>
<div class="so-accordion-wrapper">
<div class="so-tab">
<input id="so-tab-9" type="checkbox" name="tabs">
<label for="so-tab-9">
<h2>Service 1</h2>
</label>
<div class="so-tab-content">
<div class="pricing-tables">
<div class="Rtable Rtable--4cols Rtable--collapse">
<div class="Rtable-cell Rtable-cell--head Rtable-cell--3of5">
<h5>Service Option 1</h5>
<p>Description</p>
</div>
<div class="Rtable-cell Rtable-cell--1of5">1 hr</div>
<div class="Rtable-cell Rtable-cell--foot Rtable-cell--1of5">
<strong>$90</strong>
</div>
<div class="Rtable-cell Rtable-cell--head Rtable-cell--3of5">
<h5>Service Option 2</h5>
<p>Description</p>
</div>
<div class="Rtable-cell Rtable-cell--1of5">30 min</div>
<div class="Rtable-cell Rtable-cell--foot Rtable-cell--1of5">
<strong>$75</strong>
</div>
<div class="Rtable-cell Rtable-cell--head Rtable-cell--3of5">
<h5>Service Option 3</h5>
</div>
<div class="Rtable-cell Rtable-cell--1of5">30 min</div>
<div class="Rtable-cell Rtable-cell--foot Rtable-cell--1of5">
<strong>$375</strong>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Ideally, what I'm looking for is to link /#nailcare-id with a URL string so that the table expands the relevant div when the user clicks that specific link from wherever it is on the site/page. Can this be done? Let me know if there's anything else I need to provide, I'm relatively new to Shopify.
Thanks in advance, your help is appreciated!
Johno
store url?
Hi @IttantaTech, thanks for stopping by.
The store itself is password protected for the client at the moment and I'm kind of taking over after another developer has been fishing around. Can I perhaps DM you the link/password?
Cheers,
Johno
great thansk for details
can you please also sent test page url
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024