Hola, cuando intento poner dos códigos HTML 

Sólo uno de ellos funciona. En cambio si los pongo en distinta página funcionan ambos, el problema es que ambos deberían funcionar en la misma página por la estructura y organización de la web.

El código es como este:

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

.active, .accordion:hover {
background-color: #ccc;
}

.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}

.active:after {
content: "\2212";
}

.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>

<button class="accordion">Auditorias Laborales</button>
<div class="panel">
<p>Realización de informes, previo análisis y estudio de la situación laboral y de la Seguridad Social en la Empresa. Adecuación a las obligaciones jurídico-laborales. Permitirá conocer el grado de cumplimiento de la normativa laboral y social. </p>
</div>

<button class="accordion">Regímenes Especiales de la Seguridad Social</button>
<div class="panel">
<p>Agrupa actividades profesionales que debido a sus características deben encuadrarse en un sistema acorde a sus necesidades, para la adecuada aplicación de los criterios que rigen en la Seguridad Social.</p>
</div>

<button class="accordion">Procedimientos ante la Seguridad Social</button>
<div class="panel">
<p>La Tesorería General de la Seguridad Social, es el órgano gestor y administrador del patrimonio de la Seguridad Social, encargado de la afiliación, inscripción, recaudación, entre otros procedimientos. El Instituto Nacional de la Seguridad Social (y las Mutuas) tiene atribuidas facultades gestoras y administrativas de las prestaciones económicas.</p>
</div>

<button class="accordion">Conciliaciones Laborales</button>
<div class="panel">
<p>Presentación y asesoramiento en el procedimiento de conciliación laboral, y negociación en conflictos entre trabajador/a y Empresa. Acto preceptivo previo a la vía judicial.</p>
</div>

<button class="accordion">Eres</button>
<div class="panel">
<p>Gestión, dirección y tramitación del expediente de regulación de empleo. Extinción o suspensión de las relaciones laborales de los trabajadores/as de la empresa.</p>
</div>

<button class="accordion">Infracción de Normas de Prevención de Riesgos Laborales</button>
<div class="panel">
<p>Adecuación a la normativa de Prevención de Riesgos Laborales (Ley 31/1995, de 8 de noviembre). Procedimientos derivados de infracción seguidos ante la Inspección de Trabajo y de la Seguridad Social y ante el Juzgado de lo Social./as de la empresa.</p>
</div>

<button class="accordion">Consultas Jurídicas a Empresas</button>
<div class="panel">
<p>Experiencia y conocimiento de la regulación laboral que rige las relaciones entre empresa y trabajadores/as.</p>
</div>

<button class="accordion">Inspección de Trabajo y de la Seguridad Social</button>
<div class="panel">
<p>Procedimientos de la actuación inspectora. Visitas a la Empresa o a sus centros de trabajo y requerimientos de asistencia ante la Inspección. Recursos administrativos y judiciales.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>

Y en cambio este si funciona:

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

.active, .accordion:hover {
background-color: #ccc;
}

.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}

.active:after {
content: "\2212";
}

.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>

<button class="accordion">Contratos de Alta Dirección</button>
<div class="panel">
<p>Preparación, negociación y adecuación de la relación laboral de carácter especial (RD 1382/1985, de 1 de agosto), entre el alto directivo y la Empresa.</p>
</div>

<button class="accordion">Regímenes Especiales de la Seguridad Social</button>
<div class="panel">
<p>Agrupa actividades profesionales que debido a sus características deben encuadrarse en un sistema acorde a sus necesidades, para la adecuada aplicación de los criterios que rigen en la Seguridad Social.</p>
</div>

<button class="accordion">Procedimientos ante la Seguridad Social</button>
<div class="panel">
<p>La Tesorería General de la Seguridad Social, es el órgano gestor y administrador del patrimonio de la Seguridad Social, encargado de la afiliación, inscripción, recaudación, entre otros procedimientos. El Instituto Nacional de la Seguridad Social (y las Mutuas) tiene atribuidas facultades gestoras y administrativas de las prestaciones económicas.</p>
</div>

<button class="accordion">Conciliaciones Laborales</button>
<div class="panel">
<p>Presentación y asesoramiento en el procedimiento de conciliación laboral, y negociación en conflictos entre trabajador/a y Empresa. Acto preceptivo previo a la vía judicial.</p>
</div>

<button class="accordion">Consultas Jurídicas a Individuales</button>
<div class="panel">
<p>Asesoramos en conflictos individuales con la Empresa y ante la Administración Pública.</p>
</div>

<button class="accordion">Infracción de Normas de Prevención de Riesgos Laborales</button>
<div class="panel">
<p>Adecuación a la normativa de Prevención de Riesgos Laborales (Ley 31/1995, de 8 de noviembre). Procedimientos derivados de infracción seguidos ante la Inspección de Trabajo y de la Seguridad Social y ante el Juzgado de lo Social./as de la empresa.</p>
</div>

<button class="accordion">Consultas Jurídicas a Empresas</button>
<div class="panel">
<p>Experiencia y conocimiento de la regulación laboral que rige las relaciones entre empresa y trabajadores/as.</p>
</div>

<button class="accordion">Inspección de Trabajo y de la Seguridad Social</button>
<div class="panel">
<p>Procedimientos de la actuación inspectora. Visitas a la Empresa o a sus centros de trabajo y requerimientos de asistencia ante la Inspección. Recursos administrativos y judiciales.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>

¿Existe alguna solución para que funcionen los dos en la misma página?

Gracias por la ayuda.