Button Accordion (CSS)

Question

I'm currently working on a group project to create an open-source route planner using the API provided by Graphhopper.

We have an input panel on the left like most map APIs (see Google Maps/Graph Hopper) and we currently have a panel at the top which allows the user to change what vehicle type they're using (i.e car/lorry/walking) and on that navigation bar we have to have a settings button which creates a drop down which includes further preferences that can be determined.

I'm struggling to create CSS where when the button is hovered over, the accordion opens and the preferences are displayed for the user, once it's moved off, it'll hide again.

Here is my current html for the panel:

<div id="options">
                <div id="vehicles"></div>
                <div id="preferences">
                    <button title="Settings" id="settings-btn">
                        <img src="img/settings.png" alt="Settings">
                    </button>
                    <form>
                        <table>
                            <tr>
                                <th>Traffic Signals</th>
                            </tr>
                            <tr> <!--center table rows in css!-->
                                <td>
                                    Avoid <input type="range" name="signals" min="0" max="3" value ="3"> Permit
                                </td>
                            </tr>
                            <tr>
                                <th>Road Preference</th>
                            </tr>   
                            <tr>
                                <td>
                                    <input type="radio" name="road-type" value="0" checked>Default
                                    <input type="radio" name="road-type" value="1">Main
                                    <input type="radio" name="road-type" value="2">Residential
                                </td>
                            </tr>
                            <tr>
                                <th>Motorway Preference</th>
                            </tr>
                            <tr> 
                                <td>
                                    <input type="radio" name="motorways" value="0" checked>Default
                                    <input type="radio" name="motorways" value="1">Avoid
                                    <input type="radio" name="motorways" value="2">Prefer
                                </td>
                            </tr>
                        </table>
                    <!--
                    - Traffic Signals now operate between 0 and 3 (4 variations)
                        The default value is 3, permitting traffic lights
                        2 is weak avoidance
                        1 is medium avoidance
                        0 is strong avoidance

                    - Road Preference (Default: 0, Main:1 Residential:2 )

                    - Motorway Preference (Default: 0, Avoid: 1 Prefer: 2)

                    Then add an extra button to choose (or get) shortest way
                    Note: If user choose shortest way, it will ignore other factors(traffic Signals, main road, motorway)
                    -->
                </form>
                </div>
            </div>

Currently, I don't know how to do it so it's just the button hover over to display but here is the css which, when the entire bar is hovered over, will display the settings:

#options {
background-color: #232323;
color: #FFFFFF;
float: left;
width: 285px;
overflow:hidden;
height: 32px;
transition: height 0.5s
}
#options:hover {
height: 225px;
}
#settings-btn {
width: 50px;
height: 32px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
background-color: #232323;
border-radius: 0px;
border-style: none;
outline:none;
float:right;
}

Essentially, all I want to do is apply the changes to options by using :hover on the settings-btn instead of hovering on options.

http://jsfiddle.net/aa2p96dv/ I'd rather make it purely css and I can make a jsfiddle problem is none of it will make much sense because a lot of the website is generated using javascripts. Take a look at graphhopper's map to get a feel of what it looks like. Where the vehicles types are on there, I want another option which opens further which additional preferences. — ArmsSpaghetti, Mar 09 '15 at 11:51
Try using the `:focus` or `:active` pseudo, but it would still require you to click. — Mark, Mar 09 '15 at 11:56

score 0 · Answer 1 · edited May 23 '17 at 12:06

If #settings-btn was outside #optionsyou could have done something like that:

#settings-btn:hover + #options{
height: 225px;
}

But actually you cant since your button is inside the things you want to expand in size.

Js would do the work, but if you want to do it un pure css, you have to change your html.

Maybe you can also, do some tricks: See this topic But i recommend you to change your html structure.

Sorry for my bad english

Button Accordion (CSS)

1 Answers1