CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Si8
Si8

Reputation: 9225

How to expand a DIV when menu is open

I created a JSBin

What happens is when you click on Menu, it open to display contents inside. How can I edit the JQuery so when the menu is open the inside div and the menu div is expanded and on menu close the inside div and menu is shrunk to the initial size?

Original as shown in the JSBIN link:

enter image description here

When the the user clicks on MENU it should expand like this:

enter image description here

When the user clicks again on the MENU, the DIV should go back to the original side.

Can someone help me achieve that?

Upvotes: 0

Views: 322

Answers (5)

T J
T J

Reputation: 43156

You can use JQuery slideToggle() for this:

$(document).ready(function(){
  $('#menu').click(function(){ //where menu is the id of your menu item
   $('#content').slideToggle(); // where content is the id of your content div
  });
});

initially you need to hide the div using css display:none or JQuery methods such as hide(), slideUp() etc..

UPDATE: working FIDDLE

change the following:

.cover { //removed the absolute positioning which is hiding the content div
color: white;
text-shadow: 0 2px 2px rgba(0,0,0,0.3);
font-size: 3em;
width: 200px;
height:70px;
background: linear-gradient(#30CCFC, #2CC5EF);
text-align:center;
box-shadow: inset 0 0 1px 1px #54AED0;
cursor: pointer;
transform-style: preserve-3d; 
transition: all 0.3s ease-out; 
transform-origin: bottom center; 
}

.tweet{
display:none; //initially hide the element
}

add this script:

$(function () {
  $('.cover').on('click', function(){
  $('.tweet').slideToggle();
  });
});

and see it work.

updated FIDDLE

Upvotes: 1

nandin
nandin

Reputation: 2575

change your code like this, 

 $(function () {
    $('.cover').on('click', function(){
        if ($(this).css("position") == "absolute")
            $(this).css("position", "relative");
         else
            $(this).css("position", "absolute");
    });
 });

Upvotes: 1

A J
A J

Reputation: 2140

Check this fiddle. Just added a margin style to div. is this what you are looking for?

.open {
 margin-top : 80px;
 transform: rotateX(-180deg);
 box-shadow: 0 0 2px 1px rgba(0,0,0,0.3),
 inset 0 0 1px 1px #54AED0;
 background: linear-gradient(#33CEFE, #38D6FD);
}

Upvotes: 1

user3310334
user3310334

Reputation:

Put two divs like this:

<div id="content">Stuff stuff stuff</div>
<br />
<div id="menu">MENU</div>

the top one is the one that will be expanded, as in your image. The bottom one is the button. Now, the jQuery is fairly simple:

$("#content").height( 0 );
$("#menu").click(function(){
    $("#content).height( 100 );
});

If you want the user to click, menu open, click again and it closes:

var open = false;
$("#content").height( 0 );
$("#menu").click(function(){
    if (open == false){
        $("#content").height( 100 );
        open = true;
    } else {
        $("#content").height( 0 );
        open = false;
    }
});

Upvotes: 1

martskins
martskins

Reputation: 2940

Just include it in your html with hidden="true" and when you need to show it use this

$('your-div-id').show();

Upvotes: 1

Related Questions