Sliding boxes

by fiddleyetu

HTML

<div class="togglecone">
        </div>
        <div class="contentcone">
            <div class="contentleft">
                <div class="title">
                Cone
                </div>
                <div class="maincopy">
                Hello my friends this is a really nice cone that can be placed anywhere
                </div>
                <a href="https://www.mcnicholas.co.uk/" class="button">
                View on website
                </a>
            </div>
            <div class="contentright"> <img src="images/cone.png" alt=""/>
            </div>
        </div>

CSS

.togglecone{
	height:28px;
	width:28px;
	background-color:black;
	}
	
.togglecone.expandedcone{
	background-color:green;
	}

.contentcone{
	margin-left:40px;
	width: 300px;
	background: #a6d165;
	z-index:2;
	
}

JavaScript

$(document).ready(function(){
    var $content = $(".contentcone").hide();
    $(document).on("click", function(e) { 
        if( $(e.target).is(".togglecone") ) {       
            $(this).toggleClass("expandedcone");                                        
            $content.slideToggle();
                                           
        } else {
            $content.slideUp();
        }
    });
});