expand / collapse div height and width with img click

expand height and width of div with img tag click

by Donavon Lerman

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<body style="margin: 0" >
    <br />
    <div  id = "portlet"
          class = "portlet" 
          >
      <div  id = "portletHandle"
            class = "portletHandle"
          >
        <table width="100%">
          <tr >
            <td align="left" width="20%">
              <span id="expandBody" class="ui-icon ui-icon-triangle-1-s"></span>
            </td>
            <td align="center" width="60%">
              HANDLE
            </td>
            <td align="right" width="20%">
              <span id="expandPortlet" class="ui-icon ui-icon-triangle-1-ne"></span>
            </td>
          </tr>
        </table>
      </div>
      <div  id    = "portletBody" 
            class = "portletBody" 
            >
        <iframe name        = "iframeBody" 
                id          = "iframeBody" 
                frameborder = "0"
                width       = "100%"
                height      = "100%" 
                align       = "center" 
                frameborder = "0" 
                src         = "http://www.wikigifs.org"
        >
          iframeBody
        </iframe>
      </div>
    </div>

    <br /><br />

    <div  id = "portlet"
          class = "portlet" 
          >
      <div  id = "portletHandle"
            class = "portletHandle"
          >
        <table width="100%">
          <tr >
            <td align="left" width="20%">
              <span id="expandBody" class="ui-icon ui-icon-triangle-1-s"></span>
            </td>
            <td align="center" width="60%">
              HANDLE
            </td>
            <td align="right" width="20%">
              <span id="expandPortlet" class="ui-icon ui-icon-triangle-1-ne"></span>
            </td>
          </tr>
        </table>
      </div>
      <div  id    =...

CSS

.portlet {
    vertical-align:     top;
    text-align:         center;
    margin:             0 auto;
    padding:            0;
    width:              50%;
    border:             1px solid;
  }

JavaScript

$(document).ready(function() {
  
        
    $('span#expandBody').click(function() {
       
        $(this).prop('class', ( $(this).prop('class') == "ui-icon ui-icon-triangle-1-s" ? "ui-icon ui-icon-triangle-1-e" : "ui-icon ui-icon-triangle-1-s" ));
        $(this).parent().parent().parent().parent().parent().parent().find('div.portletBody').slideToggle();
        
    });
    
    
    $('span#expandPortlet').click(function() {
    
      $(this).parent().parent().parent().parent().parent().parent().animate({width: ( $(this).prop('class') == "ui-icon ui-icon-triangle-1-ne" ? "95%" : "50%" )});  
      $(this).prop('class', ( $(this).prop('class') == "ui-icon ui-icon-triangle-1-ne" ? "ui-icon ui-icon-triangle-1-sw" : "ui-icon ui-icon-triangle-1-ne" ));
        
    });
    
  });