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>

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>