javascript - How can i use an outside div to toggle expand and shrink on another Div onClick? -

javascript - How can i use an outside div to toggle expand and shrink on another Div onClick? -

i have div (.panel) that, when clicked, expands, , when clicked again, shrinks. instead of clicking (.panel) how can click outside div (.open) in order expand , shrink original div (.panel) instead of using (.panel) trigger? inquire because want utilize exterior icon trigger.

http://jsfiddle.net/lycrest15/z2p0r5s9/

<div class="open">open</div> <div id="effect" class="mores" style="background-color: brown"> <div class="panel"> <ul> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> </div> var next_move = "expand"; $(document).ready(function () { $(".panel").click(function () { console.log(next_move); var css = {}; if (next_move == "expand") { css = { width: '210px', height: '170px' }; next_move = "shrink"; } else { css = { width: '30px', height: '20px' }; console.log('hi'); next_move = "expand"; } $(this).animate(css, 200); }); }); .panel { width: 30px; height: 21px; overflow: hidden; color:white; background-color: grey; } .panel ul { margin-left:10%; color:white; } .mores { width: 210px; height: 170px; overflow: hidden; } .open { width: 50px; hieght:50px; }

you can utilize .open element this:

class="snippet-code-js lang-js prettyprint-override"> var next_move = "expand"; $(document).ready(function () { $(".open").click(function () { console.log(next_move); var css = {}; if (next_move == "expand") { css = { width: '210px', height: '170px' }; next_move = "shrink"; } else { css = { width: '0', height: '0' }; console.log('hi'); next_move = "expand"; } $(".panel").animate(css, 200); }); }); class="snippet-code-css lang-css prettyprint-override">.panel { width: 0; height: 0; overflow: hidden; color:white; background-color: grey; } .panel ul { margin-left:10%; color:white; } .mores { width: 210px; height: 170px; overflow: hidden; } .open:hover { cursor: pointer; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="open">open</div> <div id="effect" class="mores" style="background-color: brown"> <div class="panel"> <ul> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> </div>

javascript jquery html css slidetoggle