Menu icon Foundation
Style Accordian Button Link

So, I'm building an accordion that reveals a new sets of columns, maybe that's the wrong way to go about it but that's what I'm doing for now.

What I want: To create a normal length round button for the link that reveals the accordion content.

Problem: I've removed the link styling and replaced it with "button round" - which does exactly what I want except it inherits the width of the 12 column parent div and makes it full length. I want it to be only as long as the text within the link.

I tried moving the link, which produced the visual appearance I want, however, the link for the "panel1c" no longer work.

Any ideas?

<div class="row">
    <div class="large-12 large-centered columns">
    	<dl class="accordion" data-accordion="myAccordionGroup">
    		<dd>
    		<a class="button button-white radius round" href="#panel1e">MORE OPTIONS <i class="fa fa-caret-down"></i></a>
    			<div id="panel1e" class="content">
    				<div class="row show-for-large-up">
    					<div class="large-4 columns">
    						<ul class="pricing-table">
    						<li class="title">Annual Report</li>
    						<li class="price"><h1 class="green">995</h1><h4><small>Price is in SEK</small></h4></li>
    						<li class="bullet-item"><strong>FEATURES</strong></li>
    						<li class="bullet-item">100 online retailers tested</li>
    						<li class="bullet-item">Powerful data from competitors</li>
    						<li class="bullet-item">20 Users</li>
    						<li class="cta-button"><a class="button button-green radius round" href="#">BUY NOW</a></li>
    						</ul>
    						</div>
    						<div class="large-4 columns">
    						<ul class="pricing-table">
    						<li class="title">Website Test</li>
    						<li class="price"><h1 class="green">19 990</h1><h4><small>Price is in SEK</small></h4></li>
    						<li class="bullet-item"><strong>FEATURES</strong></li>
    						<li class="bullet-item">1 Database</li>
    						<li class="bullet-item">5GB Storage</li>
    						<li class="bullet-item">20 Users</li>
    						<li class="cta-button"><a class="button button-green radius round" href="#">BUY NOW</a></li>
    						</ul>
    						</div>
    						<div class="large-4 columns">
    						<ul class="pricing-table">
    						<li class="title">Website Test Plus</li>
    						<li class="price"><h1 class="green">29 990</h1><h4><small>Price is in SEK</small></h4></li>
    						<li class="bullet-item"><strong>FEATURES</strong></li>
    						<li class="bullet-item">1 Database</li>
    						<li class="bullet-item">5GB Storage</li>
    						<li class="bullet-item">20 Users</li>
    						<li class="cta-button"><a class="button button-green radius round" href="#">BUY NOW</a></li>
    						</ul>
    					</div>
    				</div>
    			</div>
    		</dd>
    	</dl>
    </div>
</div>
            

         

accordionbuttonaccordion link

So, I'm building an accordion that reveals a new sets of columns, maybe that's the wrong way to go about it but that's what I'm doing for now.

What I want: To create a normal length round button for the link that reveals the accordion content.

Problem: I've removed the link styling and replaced it with "button round" - which does exactly what I want except it inherits the width of the 12 column parent div and makes it full length. I want it to be only as long as the text within the link.

I tried moving the link, which produced the visual appearance I want, however, the link for the "panel1c" no longer work.

Any ideas?

<div class="row">
    <div class="large-12 large-centered columns">
    	<dl class="accordion" data-accordion="myAccordionGroup">
    		<dd>
    		<a class="button button-white radius round" href="#panel1e">MORE OPTIONS <i class="fa fa-caret-down"></i></a>
    			<div id="panel1e" class="content">
    				<div class="row show-for-large-up">
    					<div class="large-4 columns">
    						<ul class="pricing-table">
    						<li class="title">Annual Report</li>
    						<li class="price"><h1 class="green">995</h1><h4><small>Price is in SEK</small></h4></li>
    						<li class="bullet-item"><strong>FEATURES</strong></li>
    						<li class="bullet-item">100 online retailers tested</li>
    						<li class="bullet-item">Powerful data from competitors</li>
    						<li class="bullet-item">20 Users</li>
    						<li class="cta-button"><a class="button button-green radius round" href="#">BUY NOW</a></li>
    						</ul>
    						</div>
    						<div class="large-4 columns">
    						<ul class="pricing-table">
    						<li class="title">Website Test</li>
    						<li class="price"><h1 class="green">19 990</h1><h4><small>Price is in SEK</small></h4></li>
    						<li class="bullet-item"><strong>FEATURES</strong></li>
    						<li class="bullet-item">1 Database</li>
    						<li class="bullet-item">5GB Storage</li>
    						<li class="bullet-item">20 Users</li>
    						<li class="cta-button"><a class="button button-green radius round" href="#">BUY NOW</a></li>
    						</ul>
    						</div>
    						<div class="large-4 columns">
    						<ul class="pricing-table">
    						<li class="title">Website Test Plus</li>
    						<li class="price"><h1 class="green">29 990</h1><h4><small>Price is in SEK</small></h4></li>
    						<li class="bullet-item"><strong>FEATURES</strong></li>
    						<li class="bullet-item">1 Database</li>
    						<li class="bullet-item">5GB Storage</li>
    						<li class="bullet-item">20 Users</li>
    						<li class="cta-button"><a class="button button-green radius round" href="#">BUY NOW</a></li>
    						</ul>
    					</div>
    				</div>
    			</div>
    		</dd>
    	</dl>
    </div>
</div>
            

         
Lyn over 5 years ago

Hey there,

Maybe not the best way to achieve this but at least it works with minimal CSS :

  • Add class "text-center" to your dd
  • Add style "display: inline-block" to your a.button

Here is a working jsfiddle : http://jsfiddle.net/3BMGP/

Kind regards,

Lyn.

PS : I removed the "radius" class from your link as it is overwritten by the "round" one.

Ari Ahokas over 5 years ago

Lyn,

Worked perfectly. Thanks so much.

Do you recommend another method of showing/hiding content? I was thinking of using other built in methods from Found.5 but figured this would be fastest.

Thanks for the tip on radius. I should have figured that one out. I guess I assumed they should both be there, I understood the docs wrong. That actually clears up a lot.

/Ari