[SOLUCIONADO] Problema con Toogle

reifting · #1 (**permalink**) 20/10/2013, 20:15

Bueno señores, estoy usando uno de los muchos templates de bootstrap y dentro de ese template ay componente que se llama "Toogle" que es una especie de "Acordion" entonces la idea es la siguiente:

Como pueden ver la imagen de arriba esta partida en dos imagenes por una linea negra. La primera imagen es cuando el Toogle esta cerrado y la de abajo es cuando esta abierto, entonces pense en poner dentro de esos toogles las noticias que yo iria pubicando osea que cuando el toogle este cerrado mostrara el nombre de la noticia(Primera images) y cuando este abierto mostrara el nombre de la noticia, la noticia, el autor y la fecha en que se publico la noticia(Segunda imagen), pero derrepente diran okey y donde esta el problema?
Pues el problema es el siguiente:

Codigo del toogle

Código:

<div class="panel panel-default">
 <div class="panel-heading clearfix">
  <a class="accordion-toggle" data-toggle="collapse" href="#collapse33">
   Titulo de noticia
   <div class="collapse-icon"></div>
  </a>
 </div>
 <div id="collapse33" class="panel-collapse collapse in">
  <div class="panel-body">
  Contenido de noticia.
  </div>
 </div>
</div>

Como se dan cuenta "#collapse33" llama a "collapse33", es decir, la flecha esta enlazada al cuadro de abajo el cual contiene la noticia como las noticias estan almacenadas, los toogles se crean de acuerdo a la cantidad de noticias que hallan eso quiere decir que si se crean 3 noticias habran 3 toogles los 3 con el ID="COLLAPSE33" y sucedera lo que me sucede a mi, que habre solo uno o no habre ninguno T.T...
Alguien me podria ayudar?
Gracias de antemano... y espero haber sido claro...

andresdzphp · #2 (**permalink**) 21/10/2013, 14:12

Los id deben ser todos diferentes (únicos), puedes generar las ids en el mismo bucle con el que imprimes las noticias, te dejo este ejemplo básico:

Código PHP:

Ver original<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<!--[if lt IE 9]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script>
<![endif]-->
</head>
<body>
<?php $i=1; while ($i < 6): //Sólo de ejemplo ?>
<p><button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo<?php echo $i; ?>">
  simple collapsible número <?php echo $i; ?>
</button>
<div id="demo<?php echo $i; ?>" class="collapse out">Contenido de la noticia número <?php echo $i; ?></div></p>
<?php $i++; endwhile; //Sólo de ejemplo ?>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

reifting · #3 (**permalink**) 23/10/2013, 10:40

andresdzphp gracias por responder pero no era lo que buscaba realmente, ya pude solucionar mi problema e hice lo siguiente:

Primero cree dos variables ambas con valor 1 osea $varA = 1 y $varB= 1, ya que el toogle necesita que el enlace sea el mismo que el id y a la vez un numero al final para que se puedan diferenciar uno del otro de tal manera que cuando se aplique el bucle no hayan problemas entre un toogle y el otro

Código:

 <a class="accordion-toggle" data-toggle="collapse" href="#collapse' . $varA++ . '">
   Titulo de noticia
   <div class="collapse-icon"></div>
  </a>

y en el otro puse lo siguiente:

Código:

<div id="collapse' . $varB++ . '" class="panel-collapse collapse in">
  <div class="panel-body">
  Contenido de noticia.
  </div>

De esa forma $varA y $varB aumentarian 1 numero al mismo tiempo ya que su valor inicial es 1 y asi fue como me funcion.
Repito lo que en post anteriores repetire, gracias por no responder! :D porque asi pude concentrarme tanto que pude buscarle solucion por mi propia cuenta y asi aumentar mis conocimientos ;)!

andresdzphp · #4 (**permalink**) 23/10/2013, 11:36

Cita:

Iniciado por reifting

andresdzphp gracias por responder pero no era lo que buscaba realmente

lol si hiciste lo mismo que te puse en mi mensaje y ejemplo... Además sólo necesitas una sola variable. Si tuvieras los conocimientos no te habrías estancado en algo tan básico del lenguaje y sabrías que los id no deben repetirse. En fin suerte

.

Triby · #5 (**permalink**) 23/10/2013, 18:00

Cita:

Iniciado por reifting

gracias por no responder! :D

Hombre, si pones un poco de atención verás que la respuesta sugerida es correcta, lo peor es tu actitud con alguien que te dedicó unos minutos para tratar de ayudarte.

En fin, como ya te dijeron: suerte!