<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Documento sin título</title>
<style type="text/css">
li.word .head { cursor: pointer;
font-weight: bold;
color: green;
text-transform: uppercase;
width: max-content;
float: left;
margin-bottom: 0;
margin-right: 6px;
}
li.word .body { display: none;
}
li.word { display: inherit;
width: 70%;
//float: left;
margin: 0 1.5%;
}
h1.letter { clear: both;
font-size: 40px;
font-weight: bold;
position: relative;
top: 31px;
width: max-content;
}
ol.diccionary { margin-bottom: 60px !important;
display: flow-root;
margin-left: 0px;
}
/*h2 {
line-height: 4px;
}
h2, h2 a {
color: #396318;
}*/
.wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-tabs-container, .wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-tabs-list { overflow: hidden;
font-size: 1.4em;
}
</style>
</head>
<body>
<ol class="diccionary">
<li class="word"><p class="head">TITULO 1</p><br><p class="body">Texto para parrafo 1</p></li>
<li class="word"><p class="head">TITULO 2</p><br><p class="body">Texto para parrafo 2</p></li>
<li class="word"><p class="head">TITULO 3</p><br><p class="body">Texto para parrafo 3</p></li>
<li class="word"><p class="head">TITULO 4</p><br><p class="body">Texto para parrafo 4</p></li>
<li class="word"><p class="head">TITULO 5</p><br><p class="body">Texto para parrafo 5</p></li>
<li class="word"><p class="head">TITULO 6</p><br><p class="body">Texto para parrafo 6</p></li>
</ol>
<script type="text/javascript">
jQuery(document).ready(function(){ jQuery('.word .head').click(function(){ $(".body").hide(); if (jQuery(this).parent().find('.body').is(":visible")) { jQuery(this).parent().find('.body').hide(); }else{ jQuery(this).parent().find('.body').show(); }
});
});
</script>
</body>
</html>
