Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts

    Post show / hide a div when another is clicked on

    Hi All,

    I have a div which displays a date range, but when the user clicks on the div i want it to show another div underneath it with options to select a different date range.

    so here is my html code
    Code:
        <div class="date_range_container">
        	<div class="current_timzone">Today (+00:00) GMT (no daylight saving)</div>
            <div class="date_range">Feb 7, 2014 - Feb 14, 2014</div>
        </div>
        
        <div class="date_options">
        	<div class="date_chooser">
                <h3>Date Range</h3>
                <input name="date1" type="text" size="7" /> - <input name="date2" type="text" size="7" />
            </div>
            <div class="preset_dates">
                <h3>Quick Dates</h3>
                <div class="date_holder">Today</div>
                <div class="date_holder">Yesterday</div>
                <div class="date_holder">Last 7 Days</div>
                <div class="date_holder">Last 30 Days</div>
                <div class="date_holder">This Month</div>
                <div class="date_holder">Last Month</div>
            </div>
       		<div class="date_confirm">
            	<input name="apply" type="button" value="Apply" />
                <input name="cancel" type="button" value="Cancel" />
            </div>
        </div>
    the date_options div is the div i want to show when the user clicks on the date_range_container div

    my css for this is
    Code:
    .date_range_container{width:230px; float:right;border: solid #666666; border-width: 2px 30px 2px 2px; height:40px; padding:2px 4px;}
    	.current_timezone{clear:both; font-size:12px; color:#999999;}
    	.date_range{font-size:16px;}
    	.date_options{float:right; width:450px; border:1px solid #CCCCCC; display:none;}
    	.date_chooser{width:200px; margin-right:10px; float:left; padding:10px;}
    	.preset_dates{width:200px; float:left; padding:10px;}
    	.date_holder{width:90px; float:left; padding:5px;}
    	.date_confirm{float:left; border-top:1px solid #CCCCCC; padding-top:10px; margin:10px; text-align:right; width:430px;}
    at the moment the date_options div is hidden, but im not sure how to make it visable once the other div is clicked?

    any help would be great
    thanks

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,180
    Thanks
    23
    Thanked 602 Times in 601 Posts
    This works better if you gave the div an ID as well as a class.
    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .date_range_container{width:230px; float:right;border: solid #666666; border-width: 2px 30px 2px 2px; height:40px; padding:2px 4px;}
    	.current_timezone{clear:both; font-size:12px; color:#999999;}
    	.date_range{font-size:16px;}
    	.date_options{float:right; width:450px; border:1px solid #CCCCCC; display:none;}
    	.date_chooser{width:200px; margin-right:10px; float:left; padding:10px;}
    	.preset_dates{width:200px; float:left; padding:10px;}
    	.date_holder{width:90px; float:left; padding:5px;}
    	.date_confirm{float:left; border-top:1px solid #CCCCCC; padding-top:10px; margin:10px; text-align:right; width:430px;}
    </style>
    </head>
    <body>
    <div class="date_range_container" onclick="stumpy();" >
    <div class="current_timzone">Today (+00:00) GMT (no daylight saving)</div>
    <div class="date_range">Feb 7, 2014 - Feb 14, 2014</div>
    </div>
    
    <div class="date_options">
    <div class="date_chooser">
    <h3>Date Range</h3>
    <input name="date1" type="text" size="7" /> - <input name="date2" type="text" size="7" />
    </div>
    <div class="preset_dates">
    <h3>Quick Dates</h3>
    <div class="date_holder">Today</div>
    <div class="date_holder">Yesterday</div>
    <div class="date_holder">Last 7 Days</div>
    <div class="date_holder">Last 30 Days</div>
    <div class="date_holder">This Month</div>
    <div class="date_holder">Last Month</div>
    </div>
    <div class="date_confirm">
    <input name="apply" type="button" value="Apply" />
    <input name="cancel" type="button" value="Cancel" />
    </div>
    </div>
    
    <script>
    function stumpy(){
    	document.getElementsByClassName("date_options")[0].style.display = 'block';
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    Brilliant Mate, Thank You!!!

    How do i hide the dive if the user clicks somewhere else on the page?
    Cheers

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Quote Originally Posted by LJackson View Post
    Brilliant Mate, Thank You!!!

    How do i hide the dive if the user clicks somewhere else on the page?
    Cheers
    Add a auto closure of the div in the javascript or jQuery. i.e it will fade close after 1 minute or you can add if clicked outside of the div area the box will close.

  • #5
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    i've tried this to hide the div when anything other than the shown div is clicked on but it does nothing?
    Code:
    <script>
    $(document).click(
    	function() 
    	{
    		if(this !== $("#date_options")[0])
    		{
    			$("#date_options").hide();
    		}
    	}
    )
    </script>
    any ideas

    (appoligies for the topic now leaning towards jquery/javascript and not css)

    thanks
    Luke

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,180
    Thanks
    23
    Thanked 602 Times in 601 Posts
    You don't have IDs, your using classes.
    try this:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
    function stumpy(){
    document.getElementsByClassName("date_options")[0].style.display = 'block';
    }

    $(document).mouseup(function (e)
    {
    var container = $(".date_options");

    if (!container.is(e.target)
    && container.has(e.target).length === 0)
    {
    container.hide();
    }
    });
    </script>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #7
    Senior Coder
    Join Date
    Jun 2008
    Location
    Cornwall
    Posts
    2,097
    Thanks
    297
    Thanked 12 Times in 12 Posts
    doh! didnt think of that

    thank you


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •