Jump to content

Recommended Posts

Hello

 I want to put an accordion-like menu on my site. Looking on Google i came across this: 

https://codepen.io/raubaca/pen/PZzpVe


So i tried to use it on my site here:

http://www.armonisencia.cl/site/puntos-de-venta/

I like how when you put the input type as"select" in the tabs, they toggle open/close when you click them, but if you click another tab when you have one open, the first one keeps open. I wish it closed itself.

By the other hand, i you put the input type as "radio" in the tabs, every time you lick on one of them, this opens and the others close. But you can close the open tab clicking it again.

I wish i could have both effect in one. How can i do it?
 

Link to post
Share on other sites

You can't have both effects with pure CSS. These work like radio buttons and checkboxes. A checkbox can be checked and unchecked, but does not affect other checkboxes. A radio button can only be selected and only gets deselected when a different radio button in the same group is selected.

Link to post
Share on other sites

I'm not putting those <br> myself something is generatin them. 

This is my code:

 

<div class="tab"><input id="tab-one" name="tabs" type="radio">
<label for="tab-one">PROVIDENCIA</label>
<div class="tab-content" >
<h4 class="subtitulo">Aldea Nativa  Tobalaba</h4>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3329.7643286413904!2d-70.58987878480131!3d-33.429388080780015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9662cf0f3918e921%3A0x8ccee82ada4d5845!2sTobalaba+1799%2C+Providencia%2C+Regi%C3%B3n+Metropolitana!5e0!3m2!1ses!2scl!4v1507233683497" width="550" height="225" frameborder="0" style="border:0" allowfullscreen></iframe>
<h4 class="subtitulo">Bow Spa</h4>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3329.3185957576798!2d-70.61504988518345!3d-33.44100518077667!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9662cf789181ed05%3A0xa9aaf7e364430541!2sAntonio+Varas+1540%2C+Providencia%2C+Regi%C3%B3n+Metropolitana!5e0!3m2!1ses!2scl!4v1507235865077" width="550" height="225" frameborder="0" style="border:0" allowfullscreen></iframe>
<h4 class="subtitulo">Mermoz Providencia</h4>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3330.11334590174!2d-70.60863198518412!3d-33.42028918078254!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9662cf69040fa573%3A0x23907b0f170fd4f8!2sAv.+Providencia+2368%2C+Providencia%2C+Regi%C3%B3n+Metropolitana!5e0!3m2!1ses!2scl!4v1507236117341" width="550" height="225" frameborder="0" style="border:0" allowfullscreen></iframe>
<h4 class="subtitulo">Dellanatura Mall Vivo Panoramico</h4>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3329.9918827394267!2d-70.61220768518406!3d-33.423455980781526!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9662cf65fc43b5e9%3A0x891eec39c901980b!2sDellanatura!5e0!3m2!1ses!2scl!4v1507236369461" width="550" height="225" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>
</div>

 

Link to post
Share on other sites

This page take so long to load, I should think users would die of old age before it finishes loading, and its stutters or jumps up and down when scrolling, its so annoying.

As far as I can tell, you don't have css to add icon IF you mean plus sign and arrows?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...