#1
  1. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Nobbies beach, Gold Coast. It's beautiful.
    Posts
    2,574
    Rep Power
    171

    Change class or css when click on element OR on element again.


    Hello;

    I'm half way there:

    In this page, click on drop down, 1 - Opens the list under and 2 - Changes the style. Second time click on it (or click any other part of the screen): Changes the style back to what it was.


    In tech words:

    1 - I need to add css or class to the drop down and the div under when I click "anywhere else" on screen but the dropdown div itself (just the header);

    2 - I need to add css or class to the drop down (and the div under that opens) when I click "on the drop down menu" itself;

    Thank you
  2. #2
  3. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Nobbies beach, Gold Coast. It's beautiful.
    Posts
    2,574
    Rep Power
    171
    Hey guys I kinda sort it out but I really like to hear some comments so I can improve this.
    Code:
    <style type="text/css">
    .behnam {
        width:200px;
        background: -moz-linear-gradient(center top , #FFFFFF, #F5F5F5) repeat scroll 0 0 #F5F5F5;
        border-radius: 5px 5px 5px 5px;
        font-family: 'Helvetica',Arial,sans-serif;
        font-size: 12px;
        font-weight: bold;
        line-height: 14px;
    	
    	background-image: url("http://hotels2go.com.au/stylesheets/../images/dk_arrows.png");
        background-position: 90% center;
        background-repeat: no-repeat;
        border: 1px solid #CCCCCC;
        border-radius: 5px 5px 5px 5px;
        color: #555555;
        padding: 7px 45px 7px 10px;
        text-shadow: 1px 1px 0 #FFFFFF;
        transition: border-color 0.5s ease 0s;
    }
    
    .focus {
    	 background-color: #ececec;
        border-color: #8c8c8c;
        color: #ccc;
        box-shadow: inset 0 -2px 5px #ccc;
        border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        -webkit-border-radius: 5px 5px 0 0;
    	  box-shadow: 0 0 5px #40b5e2;
        -moz-box-shadow: 0 0 5px #40b5e2;
        -webkit-box-shadow: 0 0 5px #40b5e2;
    	}
    	
    .options { display:none;
    width:200px;
      font-family: 'Helvetica', Arial, sans-serif;
      background-color:#; padding:5px;
      line-height:22px;
      font-size:12px;
      color:#333;}
      
     .option:hover { background-color:#0084C7}
      
      .option { border-bottom:1px solid #ccc; padding:10px; border:1px solid #ccc; border-bottom:none;}
    	.last { border-bottom:1px solid #ccc; }
    </style>
    <script>
    $(document).ready(function() {
    
    $('html').click(function() {
    	$(".behnam").removeClass("focus");
    		$(".options").css("display",'none');
    });
    
    $('.behnam').click(function(event){
        event.stopPropagation();
    });
    
    
    var open_stat = false;   
     
       $(".behnam").hover(function(){
           $('.behnam').css('border', '1px solid #8c8c8c');
        });
    	
    	
    	$(".behnam").mouseout(function(){
           $('.behnam').css('border', '1px solid #cccccc');
        });
    	
    	$(".behnam").click(function(){
    	    if(open_stat==true)
    			{
    				open_stat=false;
    				$(".behnam").removeClass("focus"); 
    				$(".options").css("display",'none'); 
    			}
    		else
    			{
    				open_stat=true;
    				$(".behnam").addClass("focus"); 
    				$(".options").css("display",'block'); 
    			}
    			
    			
    		
    		
    	});
    	
    
     
    	
    	$(".behnam").blur(function() {
    		$(".behnam").removeClass("focus");
    		$(".options").css("display",'none'); 
    	});
    	
    $(".option").hover(function() {
    		$(this).css("color",'white');	
    	});
    
    $(".option").mouseout(function() {
    		$(this).css("color",'black');	
    	});
    	
    	
    });
    
    function edit_value(argument) 
    	{
    		$("#behnam").html(argument);  
    	}
    
    
    
    
    </script>	
    <html>
    <div class="behnam" id="behnam">Lance check this Drop Down</div>
    <div class="options">
    	<div class="option" onClick="edit_value('5 Hours');">
        	This Took 5 hours LANCEEEEEE
        </div>
        <div class="option" onClick="edit_value('This Opption 2');">
        	This Option 2
        </div>
        <div class="option last" onClick="edit_value('**** Drop Kick');">
        	**** I make better Jquery than Drop kick People
        </div>
       
     
    </div>
    
    </body>
    </html>
    Thanks

IMN logo majestic logo threadwatch logo seochat tools logo