Giving a DIV a maximize button

I currently have a div on my page that I would like a user to be able to click and maximize the div so it appears over the whole screen. I would like it to be similar to how Gmail has a button that allows you to maximize what the user is looking at, and then return to the original size with another click of a button.



The problem I ran into is that my div contains 3 divs inside of it.
Here is my HTML



    <div id="pre">
<div id="pre-title">Pre Reading</div>
<div id="pre-text">blahhh.</p></div>
</div>
<div id="passage">
<div id="passage-title">2.2.3</div>
<div id="passage-text">blahlkdsfjahlskdjfh</div>
</div>
<div id="media">
<div id="media-title">Media Videos</div>
<div id="media-text">even more garbage</div>
</div>


These div's are placed directly next to each other on the page and I would like it if I could include a button next to the title that would allow the user to make the section larger, like they were maximizing the readings.



Answers

Just giving you the glimpse, change styling as per your requirement.



WORKING:DEMO



JS



$(document).ready(function () {
$(".readmore").click(function () {
var readMore = $(this).parent().attr("id");
var mainDiv = $("#" + readMore).parent().attr("id");
var textDiv = mainDiv +"-text";
$("."+ textDiv).toggleClass("maximize");
});

$(".close").click(function () {
$(".pre-text, .passage-text, .media-text").removeClass("maximize");
});
});


Answers

<script>
$(document).ready(function() {
$('#pre').click(function(e) {
$('#pre').toggleClass('maximized', 500); // 500 ms to animate
} );
} );
</script>

<style>
#pre {
width: 50px;
}
#pre.maximized {
width: 500px;
}
</style>