Toggle in jquery

[rotten69]

Hey there,

I'm just having a tiny problem with this function. the toggle function works fine but what I want to do is to display the date whenever particular buttons are clicked or active.

        function showDate(element){
            if(element == "#selection3" || element == "#selection4"){
                document.getElementById("dateinput").style.visibility = "visible";
            }else{
                document.getElementById("dateinput").style.visibility = "hidden";
            }
        }


        function toggle_element(element){s
                    $(element).toggle();    
        }



                <input id="toggle_button" type="button" value="Number of players per game" onclick="toggle_element('#selection1');">
            <div id="selection1" style="display:none;">
                 <div id="container1" style="width: 75%; height: 400px; margin-left: 1%; margin-right:10%; "></div>
                 <p></p>
            </div>

                <input id="toggle_button" type="button" value="Score vs Age" onclick="toggle_element('#selection2');">
            <div id="selection2" style="display:none;">
                 <div id="container2" style="width:75%; height: 400px; margin-left: 1%; margin-right:10%; "></div>
                 <p></p>
            </div>



                <input id="toggle_button" type="button" value="Number of games played per day" onclick="toggle_element('#selection3');">
            <div id="selection3" style="display:none;">
                 <div id="container3" style="width: 75%; height: 400px; margin-left: 1%; margin-right:10%; "></div>
            <p></p>
            </div>


            <div id = "dateinput"  >
            Start Date:<input type="text" onfocus="showCalendarControl(this);" id = "start_date" name = "start_date" value = "2012-10-01" onchange= "">
            End Date:<input type="text" onfocus="showCalendarControl(this);" id = "end_date" name = "end_date" value = "2012-10-25" onchange= "">

            <input type="submit" value="Update" onClick= "graph_chosen()">
        </div>

I want to display the date whenever selection 3 is active only. I'd appreciate quick help with this

[rotten69]

I get it to work and display the date when the selection 3 or 4 is active then I can't hide it when they aren't active.

[Troy III]

use the onblur=... event to hide them

[rotten69]

How can I determine how many lines of text to display in JS? Let's say I want to show users 3 lines of text and if they want to see more, they will toggle the div.