Sliding boxes

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();
  $(".togglecone").on("click", function(e){
    $(this).addClass("expandedcone");
    $content.slideDown();
  });
    
    $(this).on('click', function(e) {
        if ($(e.target).is('.togglecone')) {
            return;
        }
        if ($(".togglecone").hasClass('expandedcone')) {
            $content.slideUp();
            $(this).removeClass("expandedcone");
        }
    });
});