HTML Buttons with Div Areas Underneath Absolute Positioned

Thursday, January 5th, 2023

HTML Buttons with Div Areas Underneath Absolute Positioned

I received a design from our UI team at work that included some buttons that toggle additional HTML areas underneath them when clicked.  I've never tried doing this before or thought about this design approach, but I suppose it could be useful in certain scenarios.  As such, I decided to create a jQuery prototype here:

https://jsfiddle.net/2btkwan3/2/

The jQuery and JavaScript:

// find elements
var button = $("button.view")
// handle click and add class
button.on("click", function(e){
  $(button).not($(this)).removeClass('active');
  $(this).removeClass('active').addClass('active');
  var moreDivArea = $("div.moreStuff", $(this).closest('.buttonWrapper'));
  $("div.moreStuff").not(moreDivArea).removeClass('hide').addClass('hide');
  if(moreDivArea.hasClass('hide')){
      moreDivArea.removeClass('hide');
  }else{
    moreDivArea.removeClass('hide').addClass('hide');
  }
})

The HTML Code:

<div class="buttonWrapper">
  <button class="view">View more stuff</button>
  <div class="hide absolute moreStuff">
    <p>
    Showing this is possible!
    </p>
    <table>
      <thead>
        <tr>
          <th>Color</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Blue</td>
          <td>Eric</td>
        </tr>
        <tr>
          <td>Green</td>
          <td>Matt</td>
        </tr>
        
        <tr>
          <td>Purple</td>
          <td>Glenn</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="buttonWrapper rightButtonWrapper">
  <button class="view">View Firefox coolness</button>
  <div class="hide absolute moreStuff">
    <p>
    Showing this is possible!
    </p>
    <img src="https://design.firefox.com/product-identity/firefox/firefox/firefox-logo.png" height="100">
  </div>
</div><div>
<p>
Stuff underneath this...
</p>
<img src="https://neilpatel.com/wp-content/uploads/2021/02/ExamplesofSuccessfulBannerAdvertising-700x420.jpg">
</div>

The CSS:

.hide {display: none;}
.absolute {position: absolute;}
div.buttonWrapper {display: inline-block; vertical-align: top;}
div.rightButtonWrapper {
 
}
button.view {box-sizing: border-box;}
.moreStuff {
  width: 300px;
  border: 2px solid blue;
  box-sizing: border-box;
  z-index: 999;
  background-color: white;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0px;
  padding-bottom: 1em;
}
button.active{
  border: 2px solid blue;
}

That's all.  How this translates into a React component is another problem I guess I'll have to solve later.  For now, this was just a proof of concept using my beloved jQuery!