Fill width respecting float MRE

by Henri Augusto

HTML

<html>
<head>
		<title>tabVerse Popup</title>
		<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
		<div id="main_title">Name goes Here</div>
		<div id="popup_content">
				<!-- Main stuff -->
				<input id="main_input">
				<button id="main_new_btn">new</button>
				<button id="search_btn">search</button>
				
				<!-- Various Entries -->
				<div id="all_entries">
						
						<!-- 1st entry -->
						<div class="entry">
								<!-- The bar contains the Title and buttons. Clickign the title should show the entry contents -->
								<div class="entry_bar">
										<span class="entry_title collapsible" content_id="contentA">Title A</span>
										<button class="entry_btn">close</button>
										<button class="entry_btn">open</button>
								</div>
								<!-- 1st entry contents -->
								<div class="collapsible_content" id="contentA">
										<ul>
												<li>Content A1</li>
												<li>Content A2</li>
												<li>Content A3</li>
										</ul>
								</div>
						</div>
						
						<!-- 2nd entry -->
						<div class="entry">
								<!-- The bar contains the Title and buttons. Clickign the title should show the entry contents -->
								<div class="entry_bar">
										<span class="entry_title collapsible" content_id="contentB">Title B</span>
										<button class="entry_btn">close</button>
										<button class="entry_btn">open</button>
								</div>
								<!-- 2nd entry contents -->
								<div class="collapsible_content" id="contentB">
										<ul>
												<li>Content B1</li>
												<li>Content B2</li>
												<li>Content B3</li>
										</ul>
								</div>
						</div>


				</div>
		</div>

</body>
</html>

CSS

body {
	background: #202124;
	color: white;
	margin: 0px;
}

#main_title {
	text-align: center;
	font-size: x-large;
	background-color: #080808;
}

#popup_content {
	padding: 5px 15px;
	font-size: large;
}

button {
	color: #ffffff;
	font-size: small;
	background-color: #ef6c00;
	border-color: black;
}


.collapsible {
  cursor: pointer;
}

.active, .collapsible:hover {
  background-color: #0000ff;
}

.collapsible_content {
  display: none;
}

.entry {
	padding: 10px 0px;
}

.entry_btn {
	float: right;
}

.entry_bar {
	/* overflow: hidden; */
}

.entry_title {
    background-color: green;
		user-select: none;
}

JavaScript

function collapsibleListeners(){
	var coll = document.getElementsByClassName("collapsible");
	for (var i = 0; i < coll.length; i++) {
	  coll[i].addEventListener("click", function() {
	  	//in this context this == coll[i]?
	  	var content_id = this.getAttribute("content_id");
	  	console.log(this);
	  	console.log("content_id = "+content_id);
	    this.classList.toggle("active");

	    var content = $("#"+content_id)[0];
	    if (content.style.display === "block") {
	      content.style.display = "none";
	    } else {
	      content.style.display = "block";
	    }
	  });
	}
}

collapsibleListeners();