elentok/gist:2874673

## gistfile1.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Boris Expander Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {

        $('.expander-section').hide()
        $('a.expander').click(function(e) {
          e.preventDefault();
          $(this).next().slideToggle('fast')
          $(this).toggleClass('open')
        });

      });

    </script>
    <style type="text/css">
      .expander {
        display: block;
      }

      .expander.open {
        font-weight: bold;
      }
    </style>
  </head>
  <body>

    <a href="#" class="expander">Section 1</a>
    <div class="expander-section">
      This is the contents of section 1
    </div>

    <a href="#" class="expander">Section 2</a>
    <div class="expander-section">
      This is the contents of section 2
    </div>

  </body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Boris Expander Example</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {

	$('.expander-section').hide()
	$('a.expander').click(function(e) {
	e.preventDefault();
	$(this).next().slideToggle('fast')
	$(this).toggleClass('open')
	});

	});

	</script>
	<style type="text/css">
	.expander {
	display: block;
	}

	.expander.open {
	font-weight: bold;
	}
	</style>
	</head>
	<body>

	<a href="#" class="expander">Section 1</a>
	<div class="expander-section">
	This is the contents of section 1
	</div>

	<a href="#" class="expander">Section 2</a>
	<div class="expander-section">
	This is the contents of section 2
	</div>

	</body>
	</html>