Slide Toggle 2 individual divs from two different buttons

by Akram kamal

HTML

<div class="btn1 slide-toggle">Button1</div>
	    <div class="btn2 slide-toggle">Button2</div>
<div class="greenbox">GREEN BOX</div>	

<div class="yellowbox">YELLOW BOX</div>

CSS

.btn1 {
    float:left;
    clear:right;
    height:20px;
    width:90px;
    color:white;
    background-color:blue;
    margin: 5px 14px 8px 0;
}
.btn2 {
  float:left;
    clear:right;
    height:20px;
    width:90px;
    color:white;
    background-color:red;
    margin: 5px 14px 8px 0;
}


.greenbox{
position:absolute;
   top:40px;
left:0;
width: 60%;
height: 75px;
margin:0;
padding:0;
	z-index:5;
	overflow:hidden;
	border:2px solid green;
display:none;
}
.yellowbox{
position:absolute;
top:130px;
left:0;
width: 60%;
height: 75px;
margin:0;
padding:0;
	z-index:5;
	overflow:hidden;
	border:2px solid yellow;
    display:none;

}
.headsearch{
position:relative;
top:0px;
width: 100%;
height: 75px;
margin:0;
padding:0;
background: rgb(255, 255, 255); /* Fallback for older browsers without RGBA-support */
    background: rgba(255, 255, 255, 0.5);
	z-index:5;
}
.headsearchmobile{
position:relative;
top:130px;
width: 100%;
height: 75px;
margin:0;
padding:0;
background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
    background: rgba(0, 0, 0, 0.5);
	z-index:5;
	border:3px solid blue;
}

JavaScript

/* Top Search box toggle */
    $(document).ready(function(){
		
        $(".btn1.slide-toggle").click(function(){
		$(".greenbox").slideToggle();
                if($(".yellowbox").is(":visible")){
        $(".yellowbox").slideToggle();
        }
	       });
        
        
    });
	
	/* Top Search box toggle */
    $(document).ready(function(){
        $(".btn2.slide-toggle").click(function(){
		$(".yellowbox").slideToggle();
            if($(".greenbox").is(':visible')){
        $(".greenbox").slideToggle();
        }
       });
        
    });