CSS:

.dn{display: none}

<button class="acc" onclick="acc(this)">Кнопка</button>
<div class="accD dn">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi architecto autem deserunt, eos explicabo labore, laborum molestiae natus nemo nesciunt nostrum quasi, ratione reiciendis reprehenderit saepe sequi sit voluptatem.
</div>

window.acc=(e)=>{
    let q=document.querySelectorAll(".acc"),
        w=document.querySelectorAll(".accD");
    q.forEach((e2,l)=>{
        if(e==e2){
            if(!e.classList.contains("accCl")){
                e.classList.add("accCl");
                w[l].classList.remove("dn")
            }else{
                e.classList.remove("accCl");
                w[l].classList.add("dn")
            }
        }
    })
};

Если Вам требуется встроить код в HTML страницу, которая не использует никаких JavaScript файлов, то просто скопируйте этот код на необходимую страницу в любое её место:

<script type="text/javascript">
function openSpoiler(elem) {
	document.getElementById('spioler').style.display='block';
	document.getElementById('but_spo').style.display='none';
	}
function closeSpoiler(elem)
	{
	document.getElementById('spioler').style.display='none';
	document.getElementById('but_spo').style.display='block';
	}
</script>

Если же Вы имеете доступ к *.js файлу, который подключен к требуемой странице, то скопируйте в него код выше, без тега <script type="text/javascript"> вначале и без </script> вконце.

Далее Вам достаточно будет создать необходимый текстовый или HTML код, который Вы с легкостью сможете вставить между строк:

<input type="button" value="Дополнительная информация" id="but_spo" onclick="openSpoiler(this)" />
<div id="spioler" style="display:none"><input type="button" value="Скрыть" onclick="closeSpoiler(this)" /><br>
123
<br><input type="button" value="Скрыть" onclick="closeSpoiler(this)" /></div>

Вставьте вместо 123 необходимую Вам информацию.
Вместо «Дополнительная информация» Вы можете использовать любые выражения.

ПРИМЕР:

Также этот код можно переделать, если Вы хотите, чтобы спойлер открывался по наведению мыши:

<input type="button" value="Дополнительная информация" id="but_spo" onmouseover="openSpoiler(this)" />
<div id="spioler" style="display:none"><input type="button" value="Скрыть" onmouseover="closeSpoiler(this)" /><br>
123
<br><input type="button" value="Скрыть" onmouseover="closeSpoiler(this)" /></div>

ПРИМЕР:

HTML:

<input type="checkbox" id="spoiler2" /> 
 <label for="spoiler2" >Spoiler</label>
<div class="spoiler">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales tortor, posuere mattis nunc. Integer eget sapien ullamcorper diam mollis laoreet. Praesent dignissim id urna at malesuada. Etiam id nisl vitae ante vestibulum volutpat. 
 <br><br>
 Etiam congue, neque a commodo iaculis, nisl massa varius felis, eget commodo eros mauris vitae felis. Pellentesque sed nisi bibendum, faucibus lectus id, varius metus. Vestibulum lacinia vehicula justo, ut molestie magna tincidunt nec. Suspendisse sit amet sagittis enim.
</div>
<p style="text-align:center;">Contenido normal intercalado sin spoiler</p>
 <input type="checkbox" id="spoiler" /> 
 <label for="spoiler">Spoiler</label>
<div class="spoiler">
 Una forma de esconder cierta información hasta que el usuario hace clic para visualizarla. Una forma de esconder cierta información hasta que el usuario hace clic para visualizarla.
 <br><br>
 <img style="display:block;margin: 0 auto;" src="https://f.inverser.pro/img/5/NeedFull.NET_stikh-projdjot-let-desyat-mozhet-byt-pyatnadtsat.jpg"/>
</div>
<p style="text-align:center;">Contenido normal intercalado sin spoiler</p>

CSS:

input[id^="spoiler"]{
 display: none;
}
input[id^="spoiler"] + label {
 display: block;
 width: 200px;
 margin: 0 auto;
 padding: 5px 20px;
 background: #e1a;
 color: #fff;
 text-align: center;
 font-size: 24px;
 border-radius: 8px;
 cursor: pointer;
 transition: all .6s;
}
input[id^="spoiler"]:checked + label {
 color: #333;
 background: #ccc;
}
input[id^="spoiler"] ~ .spoiler {
 width: 90%;
 height: 0;
 overflow: hidden;
 opacity: 0;
 margin: 10px auto 0; 
 padding: 10px; 
 background: #eee;
 border: 1px solid #ccc;
 border-radius: 8px;
 transition: all .6s;
}
input[id^="spoiler"]:checked + label + .spoiler{
 height: auto;
 opacity: 1;
 padding: 10px;
}

Пример:

Спойлер 1

Una forma de esconder cierta información hasta que el usuario hace clic para visualizarla. Una forma de esconder cierta información hasta que el usuario hace clic para visualizarla.

Спойлер 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

JS

<script>
let sp_content=$('.sp_content'),sp_title=$('.sp_title');
sp_content.hide();
sp_title.on('click',function(){
 let inx=$('.sp_title').index(this);
 $(sp_content[inx]).slideToggle(100)
})
</script>

CSS:

<style>
.sp_title{background:#ff002a;color:#fff;padding:7px 6px;margin-top:4px;-webkit-border-radius:3px;border-radius:3px;cursor:pointer}
.sp_content{background:#fff;color:#000;padding:6px 4px 4px 4px;-webkit-border-radius:3px;border-radius:3px;box-shadow:inset 0 0 0 1px #ccc}
</style>

HTML:

<div class="sp_title">Заголовок спойлера</div>
<div class="sp_content">
Содержимое спойлера
</div>

Пример:

Содержимое спойлера 1

Содержимое спойлера 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

JS

let sp_content2=$('.sp_content2'),sp_title2=$('.sp_title2');
sp_content2.hide();
sp_title2.on('click',function(){
 let inx=$('.sp_title2').index(this);
 if($(sp_content2[inx]).css('display')==='none'){
 $(sp_content2).slideUp(100);
 $(sp_content2[inx]).slideDown(100);
 }else{
 $(sp_content2).slideUp(100);
 }
})

CSS:

<style>
.sp_title2{background:#0086ff;color:#fff;padding:7px 6px;margin-top:4px;-webkit-border-radius:3px;border-radius:3px;cursor:pointer}
.sp_content2{background:#fff;color:#000;padding:6px 4px 4px 4px;-webkit-border-radius:3px;border-radius:3px;box-shadow:inset 0 0 0 1px #ccc}
</style>

HTML:

<div class="sp_title2">Заголовок спойлера</div>
<div class="sp_content2">
Содержимое спойлера
</div>

Пример:

Содержимое спойлера 1

Содержимое спойлера 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

HTML:

<nav class="spoilers-menu"><a class="spoiler-link" href="#sp1">Spoiler 1</a><a class="spoiler-link" href="#sp2">Spoiler 2</a><a class="spoiler-link" href="#sp3">Spoiler 3</a></nav>
<div class="spoilers">
 <div class="spoiler" id="sp1">
 <h1 class="spoiler__title">Spoiler 1</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci doloremque, exercitationem totam nostrum accusantium illo quibusdam sunt fugit a consectetur libero ea minima velit eaque iure ut odit eum suscipit!
 </div>
 <div class="spoiler" id="sp2">
 <h1 class="spoiler__title">Spoiler 2</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut suscipit distinctio debitis ea voluptates alias delectus quia voluptas vitae, nisi atque laudantium repudiandae deleniti, natus fugiat, quo, esse rem.
 </div>
 <div class="spoiler" id="sp3">
 <h1 class="spoiler__title">Spoiler 3</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, aperiam, itaque. Possimus, quas perspiciatis, illum assumenda odit amet obcaecati corporis, dolores aperiam a illo repellendus sit, commodi repellat quam suscipit?
 </div>
</div>

CSS:

body {
 font: 16px/1.5em "Segoe UI", Arial, sans-serif;
 background: #bfb6a0;
 color: #fff;
 width: 60%;
 margin: 20px auto;
}
.spoiler-link {
 display: inline-block;
 text-decoration: none;
 color: #fff;
 background: #b63333;
 padding: 10px 25px;
 border-radius: 3px;
 text-shadow: 0 1px 0 #8c1111;
 border-bottom: 1px solid #8c1111;
 -webkit-transition: all 0.6s ease;
 transition: all 0.6s ease;
}
.spoiler-link:hover {
 background: #8c1111;
}
.spoiler-link + .spoiler-link {
 margin-left: 5px;
}
.spoiler-link--active {
 background: #4f9c3d;
 border-color: #2d751c;
 text-shadow: 0 1px 0 #2d751c;
}
.spoiler-link--active:hover {
 background: #2d751c;
}
.spoiler {
 background: #fff;
 color: #907c6b;
 padding: 25px;
 margin-top: 25px;
 border-radius: 3px;
 border-bottom: 1px solid #999;
}
.spoiler__title {
 margin-top: 0;
 font-weight: 200;
 color: #b63333;
}

JS:

$(function(){
 $('.spoiler').hide();
$('.spoiler-link').on('click', function(e) {
var idSpoiler = $(this).attr('href'),
 classSelect = 'spoiler-link--active';
$(this).toggleClass(classSelect);
$(idSpoiler).slideToggle(200);
e.preventDefault();
 });
});

Пример: