{En este ejemplo mostrare un conjunto de funciones con las cuales podemos añadir clases definidas en el css para efectuar el diseño buscado por medio de las funciones toggleClass, fadeToggle, slideToggle y toggle de jquery.
aqui el codigo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>jQuery appletenhtml</title>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="container-fluid-">
<div class="row">
<div class="col-md-4 caja col-centrar">
<h3>jQuery - Efectos Toggle</h3>
<br>
<div class="esfera"></div>
<br>
<div id="base" class="mice" title="Titulo del contenedor">clic para mostrar contenido</div>
<div id="panel">
EjemplosDp
</div>
<button class="btn brn-default" id="boton">Ocultar|Mostrar</button>
</div>
</div>
</div>
<script src="js/jquery-3.2.0.min.js"></script>
<script>
//codigo jQuery
$(function(){
//toggleClass, fadeToggle, slideToggle y toggle
$('.esfera').on('click',function(){
$(this).toggleClass('azul');
});
//añadiendo class si da click
$('h3').click(function(){
$('.esfera').fadeToggle('slow');
});
//añadir class a elemento con hover
$('#base').hover(function(){
$('#panel').slideToggle('slow');
});
$('#boton').click(function(){
$('.esfera').toggle('fast');
});
});
</script>
<script src="js/codigo.js"></script>
</body>
</html>
}