How to Collapse/Expand a Div Within an Email? What Clients Support This

How can I expand and collapse a div using javascript?

Okay, so you've got two options here :

Use jQuery UI's accordion - its nice, easy and fast. See more info here
Or, if you still wanna do this by yourself, you could remove the fieldset (its not semantically right to use it for this anyway) and create a structure by yourself.

Here's how you do that. Create a HTML structure like this :

<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div>
</div>

With this CSS: (This is to hide the .content stuff when the page loads.

.container .content {
    display: none;
    padding : 5px;
}

Then, using jQuery, write a click event for the header.

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

Here's a demo : http://jsfiddle.net/hungerpain/eK8X5/7/

Expand/Collapse a div element?

The Anim module in YUI provides what you need. If you look here at the reversing animation example it shows how to do that. Here is the source from that.

<div id="demo" class="yui3-module">
<div class="yui3-hd">
    <h3>Reversing an Animation</h3>
</div>
<div class="yui3-bd">
    <p>Click the icon in the header to toggle the element's height.</p>
</div>
</div>
<p>This is placeholder text used to demonstrate how the above animation affects subsequent content.</p> 

<script type="text/javascript">type="text/javascript">
YUI().use('anim', function(Y) {
var module = Y.one('#demo');

// add fx plugin to module body
var content = module.one('.yui3-bd').plug(Y.Plugin.NodeFX, {
    from: { height: 0 },
    to: {
        height: function(node) { // dynamic in case of change
            return node.get('scrollHeight'); // get expanded height (offsetHeight may be zero)
        }
    },

    easing: Y.Easing.easeOut,
    duration: 0.5
});

var onClick = function(e) {
    e.preventDefault();
    module.toggleClass('yui3-closed');
    content.fx.set('reverse', !content.fx.get('reverse')); // toggle reverse 
    content.fx.run();
};

// use dynamic control for dynamic behavior
var control = Y.Node.create(
    '<a title="collapse/expand element" class="yui3-toggle">' +
        '<em>toggle</em>' +
    '</a>'
);

// append dynamic control to header section
module.one('.yui3-hd').appendChild(control);
control.on('click', onClick);

});
</script>

Trying to get email to collapse at responsive column points using Zurb Foundation

I have found the Zurb template to be annoying as well. The template you are using was built pre-hybrid period. The code is heavily dependent on media queries which will only work on iOS and Android 4.4 and below. Try the hybrid method of coding. If you haven't heard of hybrid, it's the only method that allows all devices to show a responsive version of an email (even Gmail, Gmail app and Samsung devices).

I wrote a step by step method (originally in SO Documentation, now shown below) that you can use to build your own template in no time. You can use inliner websites online to inline you CSS if you have them in your header. Please let me know if you need my help in creating a full template in any way.

Coding method used: Hybrid/Spongy

It has been forever a myth that div's can not be used in emails. There are email clients (unlike outlook) that can render div's properly. The example below will illustrate how an email can be coded that will work on Gmail app (with updates not rolled out yet), Samsung device's and other email clients that don't read media queries.

Introducing Outlook conditional statements

Outlook conditional statements are very useful when it come to rendering emails or showing something specific like fall backs for outlook.

<!--[if (gte mso 9)|(IE)]>
<![endif]-->

The above code reads if greater than microsoft outlook 9 or IE

Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15

Versions for conditional statements listed.

Starting a hybrid email template

Each step has been explained in a way that it should be easy for anyone with basic HTML knowledge to understand.

First we start with a wrapper table which will span all the way across the screen and with a class of container.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[CONTENT GOES HERE]</td>
    </tr>
  </tbody>
</table>

After that we add in a media query for email clients that dont read max width but read the CSS in the header. The media query will be targeting all screens and showing the container at 700 pixels width.

@media only screen and (max-width : 700px) {
.container{width:700px;}
}

Next we add an outlook conditional statement that keeps the table (with class container) to be at a width of 700 pixels.

<!--[if (gte mso 9)|(IE)]>
    <table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="left" valign="top" width="700">
    <![endif]-->

        <table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;">
              <tbody>
                <tr>
                  <td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE]</td>
                </tr>
              </tbody>
        </table>

    <!--[if (gte mso 9)|(IE)]>
            </td>
        </tr>
    </table>
<![endif]-->

The above code should now hold your template in outlook at 700px wide.

Now for the columns. Below code will create two equal columns on the template both at 350px wide.

<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="left" valign="top" width="350">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[COLUMN CONTENT HERE]</td>
    </tr>
  </tbody>
</table>
</div>

<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="300">
<![endif]-->

<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[COLUMN CONTENT HERE]</td>
    </tr>
  </tbody>
</table>
</div>

 <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->

After this the limit is only your imagination or the designer. When designs are done it is important to be involved in the wire framing stage so there are no suprises once the design is in coding stage.

Note:

Retina images will need images set at the element level not on its style
You can still choose to do in-line CSS or you can choose to CSS in head only if all your clients support CSS in the head.

Collapse/Expand a content box with a toggle

Just use this:

$(document).ready(function() {
    //Slide up and down on click
    $("a.box-toggle").click(function(){
        $(this).toggleClass('inactive');
        $(this).parent().next("div.box-content").slideToggle("slow");
    });
});

http://jsfiddle.net/Recode/DLxaB/

updated fiddle: http://jsfiddle.net/Recode/DLxaB/1/

how to expand/collapse and add new lines to a div on clicking in a button

If you append the HTML you will just be creating a new element each time you click. You could always just have the HTML on the page with display:none, and then use jQuery .toggle() or .slideToggle() to expand/collapse.