harry_ord Posted October 6, 2017 Share Posted October 6, 2017 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 comment Share on other sites More sharing options...
Ingolme Posted October 6, 2017 Share Posted October 6, 2017 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 comment Share on other sites More sharing options...
harry_ord Posted October 6, 2017 Author Share Posted October 6, 2017 How can i make the icons appear then? i don't know why they don't appear on my site. Link to comment Share on other sites More sharing options...
Ingolme Posted October 6, 2017 Share Posted October 6, 2017 Remove the <br> element from between the radio button and the label. Link to comment Share on other sites More sharing options...
harry_ord Posted October 6, 2017 Author Share Posted October 6, 2017 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 comment Share on other sites More sharing options...
dsonesuk Posted October 6, 2017 Share Posted October 6, 2017 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 comment Share on other sites More sharing options...
harry_ord Posted October 7, 2017 Author Share Posted October 7, 2017 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/ Link to comment Share on other sites More sharing options...
dsonesuk Posted October 7, 2017 Share Posted October 7, 2017 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now