Question

I’m using Soh Tanaka’s script to toggle open and closed div content in the accordion style.

<script language="javascript" type="text/javascript">
            $(document).ready(function(){

                //Hide (Collapse) the toggle containers on load
                $(".toggle_container").hide(); 

                //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
                $("h3.trigger").click(function(){
                    $(this).toggleClass("active").next().slideToggle("slow");

                    return false; //Prevent the browser jump to the link anchor
                });

            });
</script>

I’m trying to adapt this script so that the toggle also adds an increase of 50px to the height of a container div with the id of #join_find_talk. Help, please…

You can see it in action here: http://www.snakeandherring.com.au/join/

Answer 1

You shouldn’t use Javascript to increase the height of an element by a defined amount. This is what CSS is for.

What Javascript can help you do, however, is do the dynamic part. So, instead of changing the height of an element, add a class to it. This will let you change your sizing later without ever having to edit the Javascript.

An example:

<style type="text/css">
  #join_find_talk { height: 100px; }
  #join_find_talk.expanded { height: 150px; }
</style>

<script type="text/javascript">
  $("h3.trigger").click(function(e) {
    e.preventDefault(); // Use this, not return false;
    $("#join_find_talk").toggleClass("expanded");
  });
</script>

Notice that no height/width info appears in the Javascript. This is separation of style from logic. It’s a good thing 🙂