+ Start a Discussion
pooja biswaspooja biswas 

css button hide and show

Hello
I am relatively new to css hence struggling to find a solution.
My requirement is to have a dropdown which can hide and show (toggle) similar to quick access menu of salesforce.
I have written a css for dropwdown but I am unable to toggle it.

Request the members to please help me out.
 
<apex:page >
<style>
.dropbtn {
    background-color: #4CAF51;
    color: blue;
    padding: 16px;
    font-size: 10px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f0;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content
{
    display: block;
}
.dropdown:hover .dropbtn
{
    background-color: #3e8e41;
}
</style>

<div class="dropdown" style="float:right;">
  <button class="dropbtn">Quick Access Menu</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</apex:page>



Thanks
Pooja B
Naveen DhanarajNaveen Dhanaraj
Hi Pooja.
You should use  standard controller or Controller,
<apex:page standardcontroller='Account' >

 
pooja biswaspooja biswas
Hi
I know that but the requirement is to mimic the quick access menu
 
Naveen DhanarajNaveen Dhanaraj
Follow the link,
Custom QuickAccess Menu for VisualForce page---->https://forcesecret.wordpress.com/2013/06/13/47/

 
Naveen DhanarajNaveen Dhanaraj
Do you want onclick function or mouse hover function??
pooja biswaspooja biswas
Onclick of mouse function. I just want to know how to hide and show div tag
Naveen DhanarajNaveen Dhanaraj
can brief your requirement??

For onclick follow this:http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_right
pooja biswaspooja biswas
Hi Naveen
The site given by u was gr8.
The only thing I am looking for is when user clicks on dropdown it will show the items, again when he clicks on dropdown it will hide.
so any link or articles regd this?

Thanks
Pooja B
 
Naveen DhanarajNaveen Dhanaraj
I gave you the exact link.You will find an option Try it yourself, so you can see how this works
Naveen DhanarajNaveen Dhanaraj
If you click on Green button (Dropdown) this will work .