Hi

 

Basically I want to expand a div to fit content on click (preferably a button in the top right hand corner aligned with the heading) then contract on click from the same button but now its in the bottom right hand corner..... here's an illustrated example of what i want..

 

on page load.....

 

 

on click ......

 

 

i want it so u can constantly cycle through an 'open' or 'closed' div, not so its only able to be clicked once...

 

i hope this makes sense

 

Will

You can use a simple jQuery toggle() function for this. Here's a very basic example that I just put together quickly: http://jsfiddle.net/LyndseyB/5S4mH/

 

edit: This fiddle http://jsfiddle.net/AMzfe/ (not my own work) shows how to incorporate the use of images.

Edited July 29, 201313 yr by Lyndsey

Use jQuery:

 

$(document).ready(function(){
 $("#mydiv1").click(function(){
  $("#mydiv2").slideToggle("fast");
});
});

#mydiv1 would be the Upcoming Events bar and #mydiv2 would be the information. It'd be best if you encased the info div inside #mydiv1, so it just expands the #mydiv1 instead of creating a whole new div beneath it. Make sure you set #mydiv2 to this in the CSS:

 

#mydiv2{
    display: none;
}

Hope this helps.

Thanks for the fast replies, really helpful and very appreciative, gunna go with Lyndseys fiddle cheers

What would be the JScript equivalent, of the jQuery version ?

Edited July 29, 201313 yr by CreativeSheep

What would be the JScript equivalent, of the jQuery version ?

 

Lyndsey and I clearly wrote they're both jQuery, which is JavaScript.

Pure JavaScript version: http://codepen.io/anon/pen/KfHgh

Pure JavaScript version: http://codepen.io/anon/pen/KfHgh

 

That was what I wanted to see Thank You.

never mind

Edited March 18, 201412 yr by cdstewart

What about if you have a div and you want the div to scale but not destroy the size of the graphic on the div ?

Edited March 19, 201412 yr by CreativeSheep