Making a div hidden until button pressed?, Making a div hidden until button pressed? Options

[Traversalan15]

Iv been looking around on the web for the last hour or so trying to find a working solution for me, there is a lot of information on it but i couldn't get it working, so mayb i can get some help here.

I'll show some code i have:

CODE

<div class = "locationsearch">
        
            <p> Location</p>
            
                <input id="gmap_where" type="text" size="20" name="gmap_where" placeholder="Search..." />
            
            <p></p>
            
            <button onclick="findAddress(); return false;">Search for address</button>
            
            
                <div class="button">
                    <label for="gmap_type">Type:</label>
                    <select id="gmap_type">
                        <option value="park">Parks</option>    
                        <option value="bar">Pub</option>                  
                        <option value="bank">Bank</option>
                        <option value="police">Garda Station</option>
                        <option value="cafe">Cafe</option>
                        <option value="food">Food</option>
                        <option value="hospital">Hospital</option>
                        <option value="atm">Bank Machine</option>
                        <option value="store">Shops</option>
                        <option value="museum">Museum</option>
                    </select>
                </div>
                <div class="button">
                    <label for="gmap_radius">Radius:</label>
                    <select id="gmap_radius">
                        <option value="500">500</option>
                        <option value="1000">1000</option>
                        <option value="1500">1500</option>
                        <option value="5000">5000</option>
                    </select>
                </div>
                
                 <input type="hidden" id="lat" name="lat" value="53.3441039" />
                <input type="hidden" id="lng" name="lng" value="-6.26749369" />
                <button onclick="findPlaces(); return false;">Search for objects</button>
                
        <p></p>
        <p></p>
        <h4>Travel</h4>
        <p>Destination:</p>
        <input id="gmap_whereb" type="text" size="20" name="gmap_whereb" placeholder="Search..." />
            <p></p>
            <button onclick="findAddressb(); getRoute(); return false;">Set Destination</button><p></p>
            <b>Mode of Travel: </b>
    <select id="form" onchange="getRoute();">
      <option value="DRIVING">Driving</option>
      <option value="WALKING">Walking</option>
      <option value="CYCLING">Cycling</option>
      <option value="TRANSIT">Train</option>
    </select>
    
            
            
            
            
        </div>

Basically I only want the search for address button to be visible but when its pressed I would like the div class button to appear, then when the findPlaces button is pressed i would like the find address button to appear.

I'd really appreciate any help.

[Christian J]

You might let javascript change between CSS "display: block" and "display: none". Details vary depending on the HTML structure and the intended user interface, which I think you should improve first:

Basically I only want the search for address button to be visible but when its pressed I would like the div class button to appear

This sounds like an unnecessary step for the user, unless you really need to hide those SELECT menus to save space? In fact, if there's enough space I think radio buttons would be even more user-friendly than SELECT menus (since the user needs to open the latter to view their content).

then when the findPlaces button is pressed i would like the find address button to appear.

Why does the user have to click one button just to make another button appear? Or did you mean you want a hidden "Mode of Travel" SELECT menu to appear (if so see above)?

Also you seem to use both P, H4 and B elements for headings, any reason for that? And finally it's better to use CSS for margins instead of empty P elements.