agregue más divs al dom jquery (toogle haga clic en más función)

esta es mi primera publicación en este sitio web y me pregunto si alguien puede ayudarme con un problema que ha estado sucediendo durante una semana, no sé mucho sobre JavaScript, pero trataré de explicar el problema tanto como a mí. poder.

Por ejemplo, cuando presiona ” más ” en la columna 1 y 2 verá un espacio debajo de las columnas en el lado derecho. Estas son las lagunas que necesito llenar con divs adicionales.

Sería genial llenar las lagunas con divs extras (por separado de las columnas como una cita o imagen pero por supuesto con la misma función), ahora miré> tutoriales basados ​​en “agregar elemento a DOM jquery” pero simplemente no lo conseguí 🙁 léalo y léelo y todavía no lo entiendo. Aquí están las columnas con la función y verá los huecos una vez que presione "More"

las imágenes muestran el div oculto adicional que aparece al mismo tiempo junto a la columna extendida que llena el espacio para hacer que la otra columna no se haya extendido incluso

JSFiddle

imagen de las lagunas

click_toggle.js

 clickMenu = function(menu,element,cname) { var getEls = document.getElementById(menu).getElementsByTagName(element); for (var i=0; i<getEls.length; i++) { getEls[i].onclick=function() { if ((this.className.indexOf(cname))!=-1) { if ((this.className.indexOf('click'))!=-1) { this.className=this.className.replace("click", "");; } else { this.className+=" click"; } } } } } 

more.css:

 .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } /* Float classes */ .f_right { float: right; } .f_left { float: left; } /* always visible */ #outer .holder {padding:1em; border:1px solid #ddd; margin:0 20px 10px 0;} #outer .holder p {padding:5px 0 0 0; margin:0;} #outer .holder p.bold {font-weight:bold;} #outer .holder h2 {margin:0; padding:0;} /* unclicked style div.more */ #outer div.more i {float:right; margin-right:-10px 10px 0 0; cursor:pointer; color:#c00; font-weight:bold;} #outer div.more i.hide {display:none;} #outer div.more p {display:none;} #outer div.more img {display:none;} /* clicked style div.click */ #outer div.click i.show {display:none;} #outer div.click i.hide {display:block;} #outer div.click p {display:block;} #outer div.click img {display:block; float:left; padding-right:10px;} 

Su marcado / código es un poco difícil de seguir. Así es como lo haría:

JSFiddle

Utilicé JQuery para hacer que el código sea un poco más fácil de trabajar y usé un marcado más simple para aclarar el ejemplo. Tenga en cuenta que debido a que he usado los métodos parent / find en JQuery, y dado todas las clases, es fácil tener más de un cuadro y cada uno funcionará de forma independiente.

Puedes poner cualquier contenido que quieras que se muestre y oculte dentro de los divs “extracontent”; en mi ejemplo, he puesto algunos encabezados, párrafos y una imagen, pero puede ser cualquier cosa.

Javascript:

 $(function() { $(".toggleLink").on("click", function() { // $(this) will be the "more" / "less" link that was clicked. // Find its parent, then inside that - select the "extra content" // box and toggle its visibility var extraContentBox = $(this).parent().find(".extraContent"); extraContentBox.toggle(); // Update the text of the toggle link based on the new visiblility // of the "extra content" div var linkText = (extraContentBox.is(':visible')) ? "less" : "more"; $(this).parent().find(".toggleLink").text(linkText); }); }); 

ACTUALIZAR:

Creo que necesitarás experimentar para que se vea bien. Aquí hay algunas cosas básicas que podría necesitar:

Para ocultar un elemento, inicialmente agregue “display: none;” al CSS, o en una etiqueta de estilo como esta:

 

Para seleccionar un elemento con JQuery, use #id o .class , por ejemplo:

 $("#someElementID").show(); $(".someClass").hide(); 

Use una identificación para darle un nombre a un elemento específico (debe ser único en la página). Usa clases para cosas que se usan más de una vez.

Para hacer algo cuando se hace clic en un elemento:

 $("#someElement").on("click", function() { // code here }); 

Para determinar si un elemento es visible:

 var isVisible = $("#someElement").is(":visible"); if (isVisible) { // do something } 

Para obtener la altura de un elemento:

 var height = $("#someElement").height(); 

Para establecer la altura de un elemento:

 $("#someElement").height(100); 

Si entiendo tu pregunta correctamente, ¿supongo que quieres decir que quieres que coincida con la altura de las cajas para que se alineen una al lado de la otra? Puede usar Javascript para actualizar el alto de los divs que lo contienen después de que se muestre el nuevo contenido.

Dentro de su manejador de clics, después de mostrar / ocultar el contenido adicional, puede (para cada fila) obtener la altura de cada cuadro y actualizar los otros para que coincida con la altura de la más alta.

Si está utilizando JQuery, eche un vistazo a https://api.jquery.com/height/ ; puede usar esto para obtener el alto de un elemento o establecerlo.

En mi navegador al menos, parece que tienes filas con dos columnas en cada una, en lugar de cuatro columnas. Si este es el caso, necesitaría hacer un poco de lógica para recorrer las filas y trabajar en pares de casillas.