CSS accordion

[harry_ord]

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?
 

[Ingolme]

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.

[harry_ord]

How can i make the icons appear then? i don't know why they don't appear on my site.

[Ingolme]

Remove the <br> element from between the radio button and the label.

[harry_ord]

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>

 

[dsonesuk]

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?

[harry_ord]

with it, i just used Javascript at the end:

https://codepen.io/sureshrkm/pen/ZbzBpr

Here is implemented at my site (at the bottom):

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

 

[dsonesuk]

IF we ARE talking about the icons + and arrow, they are produced using css which is also used to rotate the icons, if you do not include this and apply to a element using its class, you won't see any of these icons or it rotation.