Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

Selectbox with jQuery animation

  • 31-08-2012 11:54am
    #1
    Registered Users, Registered Users 2 Posts: 4,946 ✭✭✭


    I have a select box which when an option is selected it will perform a jQuery .slideToggle(); animation
    <select class="dropdown getgame" name="theServer">
    	<option>Server</option>
    	<option>Your server</option>
    	<option>Our server</option>
    </select>
    

    There is a hidden field
    $('#serverdetails').hide();
    

    When 'Ourserver' is selected, it should trigger
    $('#serverdetails').slideDown(200);
    

    But for the life of me I cant get this working. I have it working with a checkbox
    $("#checker").click(function()
    {
          $('#serverdetails').slideToggle(200);
    });
    

    but for aesthetic reasons I have to make this a dropdown box.

    Im sure it's a simple thing to get working, but I cannot find it anywhere and to be frank I'm fed up looking for this. So, I'm more or less asking for someone to flex their muscles and write the 3-5 lines of code that will do this for me as I'm at my whits end!! :pac:

    Cheers


Comments

  • Registered Users, Registered Users 2 Posts: 11,989 ✭✭✭✭Giblet


    What's the code for determining what dropdown option is selected (You should really have values for those options)


  • Registered Users, Registered Users 2 Posts: 586 ✭✭✭Aswerty


    As Giblet says you need to identify the selection options.

    With the following HTML:
    <select id="pick-server" class="dropdown getgame" name="theServer">
        <option id="server">Server</option>
        <option id="your-server">Your server</option>
        <option id="our-server">Our server</option>
    </select>
    
    <div id="serverdetails">
        <p>Yoohoo!!</p>
    </div>
    

    And the following JQuery:
    $(document).ready(function () {
        $('#serverdetails').hide();
    
        $('#pick-server').on('change', function(){
            if($('#our-server').prop("selected")){
                $('#serverdetails').slideDown(200);       
            }        
        });
    });
    

    We can get Yoohoo!! to slid down when we select Our Server.

    The prop http://api.jquery.com/prop/ and on http://api.jquery.com/on/ functions are particularly important in this case.


Advertisement