Expandable jQuery UI Dialog

Question

Hoping someone can help me with this as client side styling isn't my general area of expertise. I have a dialog box that displays data for a client. They want to be able to click a button on the dialog and have it expand (preferably like a slide animation) and show hidden content to the right. This content on the right also needs to scroll separate from the part on the left (which should not scroll). Think form in the left section that fits on page, and item history on the right which could potentially be long enough to scroll.

I feel like this should be possible but so far I haven't been able to get it to work and as I said client styling isn't generally my area. If anyone could help me with this it would be much appreciated.

Here is a mock-up showing generally what I am trying to achieve

Answer 1

Something like this? (if so i can annotate and explain it)

updated - added scroll, overflow-y

$('blockwrapper, hiddenblockshow').click(function() {
	$('hiddenblock').toggleClass('hiddenblockshow');
});

blockwrapper {
  position: relative;
  display: flex;
  width: 200px;
  height: 200px;
}
mainblock {
 display: flex;
 justify-content: center;
 align-items: center;
 color: white;
 background-color: hsla(0, 0%, 10%, 1);
 width: 100%;
 z-index: 1;
}
hiddenblock {
  width: 100%;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  font-size: 20px;
  background-color: hsla(0, 0%, 30%, 1);
  transition: all 0.3s ease;
  overflow-y: auto;
}
.hiddenblockshow {
  margin-left: 100%;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<blockwrapper>
    <hiddenblock>Some secret stuff Some secret stuff Some secret stuff Some secret stuff Some secret stuff Some secret stuff Some secret stuff Some secret stuff Some secret stuff Some secret stuff Some secret stuff Some secret stuff Some secret stuff Some secret stuff</hiddenblock>
  <mainblock>Some stuff<br>click me</mainblock>
</blockwrapper>

fiddle

https://jsfiddle.net/Hastig/5ya2m39e/2/

A non-flexbox version

https://jsfiddle.net/Hastig/5ya2m39e/

Answer 2

You can expand the Dialog by using

 $(document).on("click","#expand_btn",function(){

  $( ".selector" ).dialog( "option", "width", 500 );

 })