<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam recusandae dolorem unde quo distinctio quis possimus sunt id quia porro natus, pariatur repellat hic est vero repudiandae. Nostrum, commodi, fugiat.</p>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam recusandae dolorem unde quo distinctio quis possimus sunt id quia porro natus, pariatur repellat hic est vero repudiandae. Nostrum, commodi, fugiat.</p>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam recusandae dolorem unde quo distinctio quis possimus sunt id quia porro natus, pariatur repellat hic est vero repudiandae. Nostrum, commodi, fugiat.</p>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam recusandae dolorem unde quo distinctio quis possimus sunt id quia porro natus, pariatur repellat hic est vero repudiandae. Nostrum, commodi, fugiat.</p>
</div>

<div class="admin-ui">
  <div class="admin-pull-button">open me</div>
  <div class="admin-pull-content">
<!--     on desktop show 2 columns off icons that will activate actions on click. -->
<!--     on mobile show all icons under each other. -->
    
<!--     This is a fake class offcourse. -->
    <div class="cols">
<!-- all a hrefs should be icons. -->
      <a href="#">Edit page</a>
    </div>
  </div>
</div>
.admin-pull-button {
  width:20px;
  height:20px;
/*   defining height and width becuase I have no icons yet. */
}

.admin-pull-content {
  display:none;
/*  need to fix something for mobile devices to.  */
  width:20%;
  background:grey;
}
$('.admin-pull-button').on('click', function (){ 
  $('.admin-pull-content').toggle('show');
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js