Make Multiple Iframes Drag, Resize And Minimize Like A Regular Window

I'm working on a Dashboard for work where I have multiple iframes open on one web page, each iframe having a different site. I have been able to get the div's holding the iframes t

Solution 1:

To extend this a bit for multiple windows, I switched a few of your ID based elements to class based elements. You also had jQuery included a few times and I simplified that.

I think this should get you going. It is basically a simple toggle of a minimize class on your container.

// JavaScript Document
$(function() {
  "use strict";
  $(".framewrap").resizable().draggable();
  $(".framewrap .actionIcon").on("click", function() {
    $(this).closest(".framewrap").toggleClass("min");
  });
});

.body_padding {
  padding: 16px;
}

.framewrap {
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 28px;
  background-color: #277099;
  width: 512px;
  height: 90px;
  -webkit-box-shadow: 2px2px16px -2px;
  box-shadow: 2px2px16px -2px;
  border-radius: 12px;
  position: absolute;
}

.framewrapspan {
  color: #FFFFFF;
  font-size: small;
  font-style: normal;
  font-weight: 100;
}

.framewrap.actionIcon {
  display: inline-block;
  float: right;
  height: 18px;
  width: 18px;
  background-image: url(http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/minimize_window.png);
  background-size: cover;
  background-position: center center;
}

.framewrap.min {
  height: 90px!important;
  width: 256px!important;
}

.framewrap.min.actionIcon {
  background-image: url(http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/maximize_window.png);
}

.frame {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

<linkrel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /><div><divclass="framewrap"><span>Window 1</span><spanclass="actionIcon"></span><iframeclass="frame"src=""></iframe></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>