Seleccionar parrafo en un div con texto especifico

[crea3d]

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.

[crea3d]

he probado este script, detecta el click en el parrafo dentro de <li>, pero el codigo siguiente no funciona:

<script>
$(function(){
//detectar click en parrafo
$('.d_los-libros').click(function(){
//almacenar el texto del parrafo en una variable
var texto = $(this).text();
//abre una alerta ara mostrar que la variable contiene el texto del parrafo
alert(texto);
//Aqui no funciona bien, supuestamente selecciono el <section> por su clase .d_contenido-libro siempre y cuando contenga un parrafo con el mismo texto que el seleccionado anteriormente y le aplica el css, pero no funcionaaaaaaaaaaa
$("'.d_contenido-libro:contains('"+ texto +"'))'").css("display","block");
});
});
</script>

[djaevi]

Pone este codigo en el head:

Código Javascript:

$(document).ready(function() {
        var p = $(".d_los-libros p");
        var s = $(".d_contenido-libro");
        $.each(p,function(i,v) {
            $(p[i]).bind("click",function() {
                $(s[i]).slideToggle("slow");
            })
        })
    })
 

Tene en cuenta que para que funcione los parrafos y los sections deben estar consecutivos como lo estan ahi parrafo1 = opcion1 , section1 = seccion1.

Saludos

[crea3d]

Amigo djaevi, muchas gracias por tu ayuda, podrias explicar un poco lo que hace este script?

Te explico lo que trato de lograr, que al seleccionar alguna de las tres opciones (pueden ser mas o menos opciones), haga que sea visible el section que contiene el parrafo con el mismo texto que el de la opcion seleccionada, es decir, si eligen la opcion 3 (<p>opcion 3</p>) se haga visible el section que contiene el parrafo con el texto Opcion 3 y asimismo con las otras opciones, ojala me haya explicado bien, cabe decir que cada section tiene aplicado en el css el display:none, el cual hay que cambiar a block para que sea visible.

[djaevi]

Hola crea3d con gusto mira te paso a explicar.

var p = $(".d_los-libros p");

Creo esta variable y le asigno todos los parrafos que esten contenidos dentro del li con la clase de los libros (existe 1 solo), entonces el array p seria algo asi:

p[0] = equivale al '<p>opcion 1</p>'" dentro de '<li class="de_los_libros">';
p[1] = equivale al '<p>opcion 2</p>'" dentro de '<li class="de_los_libros">';
p[2] = equivale al '<p>opcion 3</p>'" dentro de '<li class="de_los_libros">';

Luego hago lo mismo pero para seleccionar los sections del html:

var s = $(".d_contenido-libro");

s[0] = equivale al '<section class="d_contenido-libro">'
s[1] = equivale al '<section class="d_contenido-libro">'
s[2] = equivale al '<section class="d_contenido-libro">'

Luego lo que hago es un bucle jquery ($.each()); con el cual recorro el primer array el de los parrafos donde p es el array e i es el indice, entonces le asigno a cada elemento del array p una funcion al hacerle click, por lo cual cada parrafo ahora ya tiene una funcion asignada al hacerle click arriba. dicha funcion es : $(s[i]).slideToggle("slow");Como el array p y el array s deben tener el mismo tamaño
(parrafo1, parrafo2, parrafo3) y (seccion1, seccion2, seccion3) puedo usar el indice que uso para recorrer p para llamar un elemento del array s por eso te decia que era tan imporante mantener el orden al a hora de crear los parrafos y las secciones, entonces $(s[i]).slideToggle("slow"); significa que a esa seccion le haga el efecto slideToggle() que no es mas que un display:block o display:none segun el estado anterior pero animado (queda mejor :P) y por ultimo todo este codigo lo meto dentro del $(document).ready() de jquery asi al cargase el arbol dom ya define la funcion para todos los parrafos.

Espero me hayas entendido je si te quedan dudas avisame Saludos!

[crea3d]

muchas gracias amigo djaevi, si en algo puedo ayudarte, cuenta conmigo.
Tu correo hotmail esta activo?, te mando un email