Hello all, I'm new here and I have a question that I hope I can explain clearly. I am currently working on creating two collapsible "buttons" positioned side by side (each taking up half of the screen width), which expand when clicked to reveal an equally wide column of text (containing code). I am using CSS grid and HTML for this task, but I am also open to using flexbox if it's more suitable in this scenario. This two-column layout will be repeated multiple times further down the page.
Currently, the buttons are not displaying at the correct width, and when expanded, the content inside each column does not behave as expected (it expands to fill the entire screen width and then wraps).
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}.collapsible {
background-color: #eee;
color: green;
cursor: pointer;
padding: 18px;
width: 50%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.collapsible:after {
content: '\02795';
font-size: 13px;
color: white;
float: right;
margin-left: 20px;
}
.active:after {
content: "\2796";
}
.active,
.collapsible:hover {
background-color: #ccc;
}
.code {
padding: 0 18px;
display: none;
overflow: hidden;
width: 50%;
background-color: #f1f1f1;
}
.code-buttons {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: 1;
}
.collapsible[name="css_button"] {
grid-column: 1;
}
.collapsible[name="html_button"] {
grid-column: 2;
}<div class="code-buttons">
<button type="button" class="collapsible" name="css_button">Media Object CSS</button>
<pre class="code">
<code id="media_objects_css">
<!-- Expanded Column Content -->
</code>
</pre>
<button type="button" class="collapsible" name="html_button">Media Object HTML</button>
<pre class="code">
<code id="media_objects_html">
<!-- Expanded Column Content -->
</code>
</pre>
</div>