Simple Click Function Demo

For workmate

by BaronGrivet

HTML

<div id="thing-to-click">
Click Me
</div>

<div id="thing-that-does-something">
<h1>Soon enough.</h1>
<p>What are their names? Son, as your lawyer, I declare y'all are in a 12-piece bucket o' trouble. But I done struck you a deal: Five hours of community service cleanin' up that ol' mess you caused. Wow, you got that off the Internet? In my day, the Internet was only used to download pornography.</p>
<p>You are the last hope of the universe. I'll tell them you went down prying the wedding ring off his cold, dead finger. <strong> I didn't ask for a completely reasonable excuse!</strong> <em> I asked you to get busy!</em> Please, Don-Bot… look into your hard drive, and open your mercy file!</p>
<h2>You, minion. Lift my arm. AFTER HIM!</h2>
<p>OK, if everyone's finished being stupid. I didn't ask for a completely reasonable excuse! I asked you to get busy! The alien mothership is in orbit here. If we can hit that bullseye, the rest of the dominoes will fall like a house of cards. Checkmate.</p>
<ol>
<li>Doomsday device? Ah, now the ball's in Farnsworth's court!</li><li>You won't have time for sleeping, soldier, not with all the bed making you'll be doing.</li><li>I barely knew Philip, but as a clergyman I have no problem telling his most intimate friends all about him.</li>
</ol>
</div>

CSS

#thing-to-click {
  background-color: #00f;
  color: #fff;
  border: #f00 2px solid;
  padding: 10px;
  margin-bottom: 50px;
  display: inline-block;
  cursor: pointer;
}

#thing-that-does-something {
  border-top: red 5px solid;
  border-bottom: red 5px solid;
  height: 0;
  overflow: hidden;
  transition: all 0.5s;
}

#thing-that-does-something.open {
  height: 500px;
}

JavaScript

$('#thing-to-click').click(function(){
	$('#thing-that-does-something').click();
});

$('#thing-that-does-something').click(function(){
	$(this).toggleClass('open');
});