Dudas con códigos html

[Leo Catán.-]

Hola, buenas.

 

En primer lugar, escribo porque tengo problemas en la implementación del código "button" en un script javascript. En una página quiero implementar 2 imágenes que, al clickearlos, despleguen información en formato de texto; es decir, una especie de spoiler pero que en vez de un botón "mostrar", aparezca una imagen. Para ello utilicé el siguiente código:

 

<div id="oculto" style="display:none;"> Contenido a ocultar, puede ser
          bloques de texto, imágenes, videos o cualquier otro elemento. </div>
        <script type="text/javascript">
function mostrar(){
document.getElementById('oculto').style.display = 'block';}
</script> <button type="button" class="boton" name="mostrar" id="mostrar" onclick="mostrar()"
          alt=""> <img src="favicon.ico"></button>

 

Esto funciona perfecto, y aparece una imagen dentro de un botón que al clickearlo muestra el texto oculto, pero, como yo necesito 2 botones, al repetir el código, sólo funciona un botón; es decir, al clickear cualquiera de los 2 muestra sólo el texto del segundo. Intenté cambiando algunos parámetros de identificación y sigue igual, así está actualmente:

 

<div style="float: left; width: 25%; text-align: center;"><span style="font-weight: bold;">Misión<br>
        <div id="oculto" style="display:none;"> Contenido a ocultar, puede ser
          bloques de texto, imágenes, videos o cualquier otro elemento. </div>
        <script type="text/javascript">
function mostrar(){
document.getElementById('oculto').style.display = 'block';}
</script> <button type="button" class="boton" name="mostrar" id="mostrar" onclick="mostrar()"
          alt=""> <img src="favicon.ico"></button> </span></div>
    <div style="float: right; width: 25%; text-align: center;"><span style="font-weight: bold;">Visión<br>
        <div id="oculto2" style="display:none;"> Contenido a ocultar, puede ser
          bloques de texto, imágenes, videos o cualquier otro elemento. </div>
        <script type="text/javascript">
function mostrar(){
document.getElementById('oculto2').style.display = 'block';}
</script><button type="button" class="boton" name="mostrar2" id="mostrar2" onclick="mostrar()"
          alt=""> <img src="favicon.ico"></button> </span></div>

 

En segundo lugar, me gustaría que alguien me pudiera ayudar en la implementación de un panel de administrador en la página, donde se pueda acceder a cambiar precios de productos de manera fácil.

 

Muchas gracias, de antemano, por su ayuda.

 

Saludos!

[AshWilliams]

El código está pésimo....pero te valdría cambiar los nombres de las funciones a mostrar1 y mostrar2, los mismo con los divs: oculto1 y oculto2 ;)

 

Saludos

Edited April 10, 2014 by AshWilliams

[Leo Catán.-]

Eñl código está pésimo....pero te valdría cambiar los nombres de las funciones a mostrar1 y mostrar2, los mismo con los divs: oculto1 y oculto2 ;)

 

Saludos

 

Eso es lo que puse, de hecho así se muesta en el post, pero no funciona. ¿Qué códgo propones?

 

Saludos!

[AshWilliams]

No es la gran mejora, pero ando apurado ;)

 

Link: http://jsfiddle.net/robertrozas/G65VH/

 

Saludos

[Leo Catán.-]

No es la gran mejora, pero ando apurado ;)

 

Link: http://jsfiddle.net/robertrozas/G65VH/

 

Saludos

 

Muchas gracias!

 

Oye y, disculpa mi ignorancia, pero estoy empezando en esto del diseño web, ¿Cómo agrego eso a mi página?

 

Saludos!

[xomarx69]

Hola amigo, para que ese código funcione en tu página tienes que incluir jquery.

Saludos

[arakxz]

yo haria algo asi, si usas html5 crearia una etiqueta data y le pondria el div a ocultar o mostrar.

<div style="float: left; width: 25%; text-align: center;">
    <span style="font-weight: bold;">Misión<br>
        <div id="oculto" style="display:none;">
            Contenido a ocultar, puede ser bloques de texto, imágenes, videos o cualquier otro elemento.
        </div>
        <button type="button" class="boton" name="mostrar" data-show="oculto" onclick="mostrar(this)">
            <img src="favicon.ico" alt="">
        </button>
    </span>
</div>
<div style="float: right; width: 25%; text-align: center;">
    <span style="font-weight: bold;">Visión<br>
        <div id="oculto2" style="display:none;">
            Contenido a ocultar, puede ser bloques de texto, imágenes, videos o cualquier otro elemento.
        </div>
        <button type="button" class="boton" name="mostrar2" data-show="oculto2" onclick="mostrar(this)">
            <img src="favicon.ico">
        </button>
    </span>
</div>

<script type="text/javascript">
    function mostrar($a) {
        if(document.getElementById($a.getAttribute('data-show')).style.display == 'none') {
            document.getElementById($a.getAttribute('data-show')).style.display = 'block';
        }else{
            document.getElementById($a.getAttribute('data-show')).style.display = 'none';
        }
        
    }
</script>

[AshWilliams]

Javascript obstrusivo...puaj

[Leo Catán.-]

Gracias a todos por la ayuda, lo implementé con jquery.

 

Saludos!

[arakxz]

el codigo no era el mejor pero solo fue una modificacion del codigo que posteo, por lo que logre entender esta aprendiendo desarrollo web y el codigo que posteastes esta echo con jquery, lo ideal seria que aprenda jquery ya que facilita mucho el desarrollo, pero a opinion personal tiene que aprender lo basico de javascript y si lo ideal es separar el codigo html del codigo js, aqui hay un ejemplo un poco mejor elavorado.

<div style="float: left; width: 25%; text-align: center;">
    <span style="font-weight: bold;">Misión<br>
        <div id="oculto" style="display:none;">
            Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.
        </div>
        <button type="button" class="boton" name="mostrar" data-show="oculto">
            <img src="favicon.ico" alt="hola">
        </button>
    </span>
</div>
<div style="float: right; width: 25%; text-align: center;">
    <span style="font-weight: bold;">Visión<br>
        <div id="oculto2" style="display:none;">
            Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id.
        </div>
        <button type="button" class="boton" name="mostrar2" data-show="oculto2">
            <img src="favicon.ico" alt="adios">
        </button>
    </span>
</div>

<script type="text/javascript">
	function mostrar($a) {
        if($a.style.display == 'none') {
            $a.style.display = 'block';
        }else{
            $a.style.display = 'none';
        }
        
    }
	var a = document.getElementsByClassName('boton');
	for (var i = 0; i<a.length; i++) {
		a[i].addEventListener('click', function(){
			var b = document.getElementById(this.getAttribute('data-show'));
			mostrar(b)
		})
	}
</script>