Wordpress Heirarchy Selector

by skibulk

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>
  Archive Page
  <span class="buttons">
    <button class="btn btn-secondary" role="button" data-toggle="collapse" href="#collapseExample">Show Pages</button>
    <button class="btn btn-primary" href='#'>Edit Page</button>
  </span>
</div>
<div class="collapse" id="collapseExample">
  <div>
    index.php
    <span class="buttons">
      <button class="btn btn-success" href='#'>Create Page</button>
    </span>
  </div>
  <div>
    archive.php
    <span class="buttons">
      <button class="btn btn-success" href='#'>Create Page</button>
    </span>
  </div>
</div>
Expand / Collapse
Create Page / Edit Page (Delete from editor)
WP Loop (Delete from editior)

CSS

html, body {
  margin: 0;
  padding: 0;
}
div {
  padding-bottom: 10px;
  overflow: hidden;
}
button {
  width: 100px;
}
.buttons {
  float: right;
}