JavaScript - Show Hide. Crear estilo.

Show Hide. Crear estilo.

Publicado por Antonio (16 intervenciones) el 08/04/2017 21:19:07

Hola, he creado una serie de enlaces que al pinchar hacen aparecer diferentes div que estaban ocultos en la misma página. Pero para definir el estilo de los divs ocultos tengo que hacerlo a cada uno con la etiqueta Style en el propio html y me gustaría crearles una sola clase en la hoja de estilos para todos, en el momento que lo hago el estilo no funciona...

<div class="buttons">

<a class="button" id="showdiv1">Logotipos</a>

<a class="button" id="showdiv2">Carteles</a>

<a class="button" id="showdiv3">Portadas</a>

<a class="button" id="showdiv4">Tríticos</a>

</div>

<div id="div1">descripcion1</div>

<div id="div2" style="display: none">descripcion2</div>

<div id="div3" style="display: none">descripcion3</div>

<div id="div4" style="display: none">descripcion4</div>

$(document).ready(function() {

    $('#showdiv1').click(function() {

        $('div[id^=div]').hide();

        $('#div1').show();

});

    $('#showdiv2').click(function() {

        $('div[id^=div]').hide();

        $('#div2').show();

});

    $('#showdiv3').click(function() {

        $('div[id^=div]').hide();

        $('#div3').show();

});

    $('#showdiv4').click(function() {

        $('div[id^=div]').hide();

        $('#div4').show();

});

})

Aquí lo podeis ver en funcionamiento:

http://enestudiografico.com/servicios.html

Gracias!!

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 8

Val: 553

Show Hide. Crear estilo.

Publicado por kip (107 intervenciones) el 08/04/2017 21:48:45

Hola, creo que en este caso te conviene mejor crear dos clases en CSS una para ocultar y otra para establecer el diseño que quieres:

.hidden {

    display:none;

.clase {

    /*EL ESTILO QUE DESEES*/

Luego con jQuery en lugar de usar las funciones hide() y show() usaria las funciones addClass() y removeClass(), asi:

$(document).ready(function() {

    $('#showdiv1').click(function() {

        $('div[id^=div]').removeClass('clase').addClass('hidden');

        $('#div1').addClass('clase');

});

    $('#showdiv2').click(function() {

        $('div[id^=div]').removeClass('clase').addClass('hidden');

        $('#div2').addClass('clase');

});

    $('#showdiv3').click(function() {

        $('div[id^=div]').removeClass('clase').addClass('hidden');

        $('#div3').addClass('clase');

});

    $('#showdiv4').click(function() {

        $('div[id^=div]').removeClass('clase').addClass('hidden');

        $('#div4').addClass('clase');

});

});

Aunque si te das cuenta es codigo repetitivo, que te parece si lo reducimos e intentamos asi:

$(document).ready(function() {

    $('a[id^="showdiv"]').on('click', function() {

       var num = parseInt(this.id.toString().replace(/\D+/, ''));

       $('div[id^=div]').removeClass('clase').addClass('hidden');

       $('#div' + num).addClass('clase');

});

});

De esa forma te ahorras unas cuantas lineas, si te gusta pruebala.

Nos cuentas como te fue.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Show Hide. Crear estilo.

Publicado por Antonio (16 intervenciones) el 09/04/2017 05:46:25

Hola kip, muy elegante tu última propuesta, se ahorra mucho código y casi funciona pues hay un problema:

En .clase pongo display:block para que aparezcan pero, sin hacer ningún click que active la función, como valor inicial aparecen todos en bloque... He leído sobre valores del display pero no consigo elegir uno mejor, o el correcto, creo que habría que añadir algo al script para ese estado inicial... para que por ejemplo salga la descripción solo del primer enlace <a>, y si me apuras que no aparezca ninguno... pero lo desconozco...

Te dejo el enlace por si no me has entendido:

http://enestudiografico.com/servicios.html

Gracias!

Valora esta respuesta

Comentar

Pos: 8

Val: 553

Show Hide. Crear estilo.

Publicado por kip (107 intervenciones) el 09/04/2017 06:01:29

Creo que no entendiste lo que quise explicar para solucionar el problema, primero añade en tu archivo CSS estas lineas:

.clase {

    padding: 20px;

    width: 50%;

    color: rgb(3, 50, 61);

    margin: 0px auto;

    font-family: Exo, sans-serif;

    font-weight: 300;

    font-size: 14px;

    border-style: dotted;

    border-top-width: 2px;

    border-color: rgb(3, 50, 61);

    height: 60px;

    display: block;

.hidden {

    display: none;

Luego simplemente a cada div en cuestion le das como clase inicial hidden, asi:

<div id="div1" class="hidden">

Formulario de preguntas, planteadas previo estudio del negocio, y respuestas, redactadas por el cliente, que engloblan las premisas necesarias para que el creativo se adecue con mayor acierto a las expectativas del interesado.

</div>

<div id="div2" class="hidden">

Esquema de numerosas ideas surgidas a raíz de un Brainstorming (lluvia de ideas), sin presumir de detalles y sin estructuras definitivas.

</div>

.....

.....

Luego con el código de arriba bastaría para que cuando hagas click en algun <a> muestre el div correspondiente.

Valora esta respuesta

Comentar

Show Hide. Crear estilo.

Publicado por Antonio (16 intervenciones) el 09/04/2017 06:03:53

Vale, hacia lo que decias pero ponía a los divs las dos clases .clase y .hidden, voy a probar.... Aun no he subido las modificaciones

Valora esta respuesta

Comentar

Show Hide. Crear estilo.

Publicado por Antonio (16 intervenciones) el 09/04/2017 06:07:56

Si, era ese error, habia puesto a los divs las dos clases. Funciona perfecto!

Valora esta respuesta

Comentar

Pos: 8

Val: 553

Show Hide. Crear estilo.

Publicado por kip (107 intervenciones) el 09/04/2017 06:50:01

La ventaja que le veo a esta solucion es que puedes agregar tantos <a> como desees con sus respectivos divs a mostrar respetando su relacion (con numeros en sus IDs) sin preocuparte por colocar sus ids en el codigo javascript mas que en su estructura HTML, tampoco embeber codigo javascript en cada atributo o evento (es algo que no recomiendo)....

Tambien es posible lograrlo sin jQuery:

document.querySelector('.buttons').addEventListener('click', function(e) {

    var elem = e.target.id.toString();

    if (elem.indexOf('show') > -1) {

        var num = parseInt(elem.toString().replace(/\D+/, ''));

        var div = document.querySelector('.clase');

        if(div !== null) div.className = 'hidden';

        document.querySelector('#div' + num).className = 'clase';

});

Valora esta respuesta

Comentar

Pos: 4

Val: 2.019

Show Hide. Crear estilo.

Publicado por ScriptShow (692 intervenciones) el 08/04/2017 22:59:56

Saludos Antonio,

hay formas muy sencillas para conseguir resultados iguales/parecidos. Veamos:

http://www.lawebdelprogramador.com/codigo/JavaScript/3760-Manejo-de-etiquetas-por-nombre-e-indexado.html

Espero sea útil.

Valora esta respuesta

Comentar

Show Hide. Crear estilo.

Publicado por Antonio (16 intervenciones) el 09/04/2017 05:47:51

Muchas gracias ScriptShow pero no he sabido aplicarlo, creo que voy a intentar el de kip :)

Valora esta respuesta

Comentar

Pos: 4

Val: 2.019

Show Hide. Crear estilo.

Publicado por ScriptShow (692 intervenciones) el 09/04/2017 01:19:35

El código base:

<style>

.divs {

display:none;width:50%;height:60px;margin:auto;padding:20px;color:#03323D;font-family:'Exo', sans-serif;font-weight:300;font-size:14px;border-top:2px dotted #03323D;

a {

padding:10px;font-family:'Exo', sans-serif;text-decoration:none;color:#1CA4BA;

</style>

<script>

var actual=null;

function toggle(id) {

if (actual != null) document.getElementById(actual).style.display="none";

actual=id;

document.getElementById(id).style.display="block";

</script>

<p align="center">

<a href="javascript:toggle('div1')">Logotipos</a>

<a href="javascript:toggle('div2')">Carteles</a>

<a href="javascript:toggle('div3')">Portadas</a>

<a href="javascript:toggle('div4')">Trípticos</a>

</p>

<div id="div1" class="divs">Formulario de preguntas, planteadas previo estudio del negocio, y respuestas, redactadas por el cliente, que engloblan las premisas necesarias para que el creativo se adecue con mayor acierto a las expectativas del interesado.</div>

<div id="div2" class="divs">Esquema de numerosas ideas surgidas a raíz de un Brainstorming (lluvia de ideas), sin presumir de detalles y sin estructuras definitivas.</div>

<div id="div3" class="divs">3</div>

<div id="div4" class="divs">4</div>

No precisa librerías, etc. Es compatible con navegadores actuales y no actuales...

Valora esta respuesta

Comentar

Show Hide. Crear estilo.

Publicado por Antonio (16 intervenciones) el 09/04/2017 06:00:05

Perfecto ScriptShow, así sí! Había pensado en utilizar toggle pero encontré la primera solución...

Muchas gracias

Valora esta respuesta

Comentar

Pos: 4

Val: 2.019

Show Hide. Crear estilo.

Publicado por ScriptShow (692 intervenciones) el 09/04/2017 23:55:00

Otro Script adaptable:

http://www.lawebdelprogramador.com/codigo/JavaScript/3940-Show-Hide-Contenidos-Independientes-y-Ampliables.html

Un saludo

Valora esta respuesta

Comentar

Poner un boton en el canvas

problema con imagen en el codigo