Modificar el tamaño del height dinámicamente

[JMunoa7]

Llevo bastante rato queriendo que el height de un contenedor de mi web sea dinámico pero no lo consigo.

Lo que quiero conseguir es que cuando pinche en el tercer tab (tab-3) el height del content se amolde al tamaño que ocupa el texto, ya que el height no varía y no aparece todo el texto.

Os dejo el CSS y el HTML para a ver si me podeis ayudar:

Código CSS:

.content {
    background: #fff;
    position: relative;
    width: 100%;
    height: 370px;
    z-index: 5;
    overflow: hidden;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
}
 

Código HTML:

<div id="panel">
            <div class="container">
                <section class="tabs">
                <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
                <label for="tab-1" class="tab-label-1">Misi&oacute;n</label>
        
                <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
                <label for="tab-2" class="tab-label-2">Visi&oacute;n</label>
        
                <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" onClick="ChangeSize()" value="ChangeSize" />
                <label for="tab-3" class="tab-label-3">Valores</label>
            
                <div class="clear-shadow"></div>
            
                <div class="content">
                    <div class="content-1">
                        <p>Aprender mientras nos desarrollamos personalmente y como equipo
                        cumpliendo nuestras metas.</p>
                    </div>
                    <div class="content-2">
                        <p>Para el 24 de Junio del 2015, queremos conseguir una satisfacci&oacute;n conjunta de aprendizaje
                        y trabajo realizado, adem&aacute;s de estar orgullosos de los cuatro años en Kibber.</p>
                    </div>
                    <div class="content-3">
                        <h2>primero</h2>
                            <p>La naturalidad es nuestro modo de vida, y tratamos de reflejar eso en cada proyecto.</p><br />
                            <p>La calidad de nuestro trabajo aumenta d&iacute;a a d&iacute;a.</p><br />
                            <p>Aprendemos mientras desarrollamos proyectos que traten de encontrar nuestras pasiones.</p>
                        <h2>segundo</h2>
                            <p>A trav&eacute;s de nuestro esp&iacute;ritu joven y energ&iacute;a
                            superamos nuestros propios l&iacute;mites.</p><br />
                            <p>Damos lo mejor de nosotros mismos por y para nuestros compañeros.</p><br />
                            <p>Consideramos que somos emp&aacute;ticos y humanos.</p><br />
                            <p>Nos gusta dar un toque de felicidad y diversi&oacute;n
                            a cada proyecto que realizamos.</p>
                        <h2>tercero</h2>
                            <p>Estamos abiertos a realizar proyectos con cualquier persona que quiera emprender
                            sin tener en cuenta el entorno socioecon&oacute;mico y cultural.</p><br />
                            <p>Tratamos siempre de reforzar todas las lenguas que se hablan en el equipo, 
                            principalmente ingl&eacute;s, euskera y castellano.</p><br />
                            <p>Entendemos los viajes de aprendizaje (Learning journeys) como herramienta b&aacute;sica para
                            la expansi&oacute;n de nuestros conocimientos, mejora profesional, desarrollo personal.</p>
                        <h2>cuarto</h2>
                            <p>Nos consideramos parte activa de MTA realizando proyectos con diferentes equipos 
                            de la comunidad, participando con constancia en sus eventos y estando siempre
                            dispuestos a ayudar a aqu&eacute;l que lo requiera.</p><br />
                            <p>Creemos fuertemente en que el trabajo equipo debe ser el soporte de toda actividad,
                            aumentando as&iacute; el aprendizaje y conocimiento obtenidos.</p>
                    </div>
                </div>
                </section>
            </div>
        </div>
 

Y la función ChangeSize:

Código Javascript:

<script type="text/javascript">
                function ChangeSize(){
                  content = document.getElementById("content");
                  content.style.height = 600px; 
                    }
            </script>
 

[IsaBelM]

content no es una id, sino un class. por lo que para accesarlo has de usar el método getElementsByClassName()[indice], en lugar de getElementById(). este método tiene un problema, y es que no es aceptado por ie8-. así que hay que crear una función que lo suplante.

creada por zerokilled

if(!document.getElementsByClassName) {

document.getElementsByClassName = function(className){
var regex = new RegExp(className);
var array = [];
var element = arguments[1] || document.documentElement;
for(var elem = element.firstChild; elem != null; elem = elem.nextSibling) {
if(elem.nodeType != 1)continue;
if(regex.test(elem.className)) array.push(elem);
if(elem.hasChildNodes()) array = array.concat(arguments.callee(className, elem));
}
return array;
}
}