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

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,675
    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
    Next Door
    Posts
    2,675
    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