Amigos, necesito de su ayuda, tengo el siguiente codigo html:
Código:
<nav id="d_mis-libros">
<ul id="d_menu-mis-libros">
<li id="d_boton-menu-mis-libros">
<p id="d_texto-boton-mis-libros">Mis Libros</p>
<ul id="d_lista-mis-libros">
<div class="d_caja-lista-mis-libros">
<div class="d_corrector-caja-mis-libros">
<li class="d_los-libros">
<p>opcion 1</p>
<p>opcion 2</p>
<p>opcion 3</p>
</li>
</div>
</div>
</ul>
</li>
</ul>
</nav>
<section class="d_contenido-libro">
<p class="d_nombre-libro">opcion 1</p>
<div class="d_caja-contenido-libro">
<ul id="d_contenido-capitulos-libro">
<li><a href="#"><p class="d_nombre-capitulo">intro</p></a></li>
<li><a href="#"><p class="d_nombre-capitulo">Capitulo 1</p></a></li>
<li><a href="#"><p class="d_nombre-capitulo">Capitulo 2:</p></a></li>
</ul>
</div>
</section>
<section class="d_contenido-libro">
<p class="d_nombre-libro">opcion 2</p>
<div class="d_caja-contenido-libro">
<ul id="d_contenido-capitulos-libro">
<li><a href="#"><p class="d_nombre-capitulo">intro</p></a></li>
<li><a href="#"><p class="d_nombre-capitulo">Capitulo 1</p></a></li>
<li><a href="#"><p class="d_nombre-capitulo">Capitulo 2:</p></a></li>
</ul>
</div>
</section>
<section class="d_contenido-libro">
<p class="d_nombre-libro">opcion 3</p>
<div class="d_caja-contenido-libro">
<ul id="d_contenido-capitulos-libro">
<li><a href="#"><p class="d_nombre-capitulo">intro</p></a></li>
<li><a href="#"><p class="d_nombre-capitulo">Capitulo 1</p></a></li>
<li><a href="#"><p class="d_nombre-capitulo">Capitulo 2:</p></a></li>
</ul>
</div>
</section>
lo que deseo es lo siguiente:
1. Cuando den click en cualquiera de los parrafo con el texto "opcion 1", "opcion 2", etc (cada parrafo son las opciones de <li>) ubicado dentro de <li> con la clase "d_los-libros" que pertenece a la etiqueta <nav>, seleccione el <section> que contiene el parrafo con el mismo texto y le aplique el css "display: block".
Gracias por su valiosa ayuda.