Minimize Maximize is not Working
Question
The minimize & maximize Button is not working The code is I want to minimize & maximize this div & also how to set the height of div box.It is just as extra as height of title bar because i give height as 100%
$(function() { $("#main").resizable(); }); $("#button").click(function() { if ($(this).html() == "-") { $(this).html("+"); $(this).slideUp(); } else { $(this).html("-"); $(this).slideDown(); } $("#box").slideToggle(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="main" id="main"> <div id="title_bar"> <div id="button">-</div> </div> <div id="box"> </div> </div>
4 answers
solution1
0 2017-06-27 07:38:10
You need to have some content inside the div box, so i added a fixed height ot demonstrate the function.
And you were sliding the button div which will hide it prevent you from click on it again.
See snippet bellow on how to do it:
$(function() { $("#main").resizable(); }); $("#button").click(function() { if ($(this).html() == "-") { $(this).html("+"); $("#main").css('height', 'auto'); $("#main").resizable('disable'); } else { $(this).html("-"); $("#main").resizable('enable'); } $("#box").slideToggle(); });
#box { height: 100px; } #button { cursor: pointer; background: yellow; padding: 0 5px; } #main { border: 1px solid; background: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="main" id="main"> <div id="title_bar"> <div id="button">-</div> </div> <div id="box"> </div> </div>
solution2
0 ACCPTED 2017-06-27 07:38:43
Try this code : I have commented two lines of your code $(this).slideUp(); and $(this).slideDown(); this lines show/hide on click of that link.
$(function () { $("#main").resizable(); }); $("#button").click(function () { if ($(this).html() == "-") { $(this).html("+"); //$(this).slideUp(); } else { $(this).html("-"); //$(this).slideDown(); } $("#box").slideToggle(); });
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <body> <div class="main" id="main"> <div id="title_bar"> <div id="button">-</div> </div> <div id="box" style="height:200px;border:1px red solid"> This is box </div> </div> </body>
solution3
0 2017-06-27 07:40:27
$(this).slideDown(); in the buttons function will simply slide the button, remove them and you're basically good to go!
$(function() { $("#main").resizable(); }); $("#button").click(function() { if ($(this).html() == "-") { $(this).html("+"); } else { $(this).html("-"); } $("#box").slideToggle(); });
#button { background: lightblue; border: 1px solid #ccc; } #box { background: coral; border: 1px solid #ccc; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="main" id="main"> <div id="title_bar"> <div id="button">+</div> </div> <div id="box"> Hello World! </div> </div>
solution4
0 2017-06-27 07:45:19
$(function() { $("#main").resizable(); $("#button").click(function() { if ($(this).html() == "-") { $(this).html("+"); $(this).slideDown(); } else { $(this).html("-"); $(this).slideDown(); } $("#box").slideToggle(); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="main" id="main"> <div id="title_bar"> <div id="button">-</div> </div> <div id="box">Hi </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript minimize and maximize
How to maximize and minimize a div
How to minimize/maximize a box with javascript
Flowtype not updating when maximize or minimize
minimize and maximize the text using javascript
JQuery Minimize & Maximize HTML Div
How to Minimize/Maximize jQuery Dialog?
Maximize/Minimize HTML Table by <th> USing JQuery
How to Close, Minimize and Maximize window in Javascript
How to maximize and minimize a div (no jquery only javascript)
Related Tags