Hello im a newbie and could do with your help please,

I need a simple show/hide toggle when clicking on an image, that swaps between an 'side arrow' and an 'down arrow' (like a drop down). This is to show/hide individual divs with text. However i need it in classes due to going into .net which uses id's.

This is already in id's, which works but need it in classes....

My function is:-

```
<script type="text/javascript">
$(function(){
  $('.nav-toggle').on('click', function(){
    var t = $(this);
    var imgSrc = t.attr('src');
    var divId = t.attr('id');
    $(divId).slideToggle('slow', function() {
      if (imgSrc === '_includes/img/components/toggle_icon_show.png') {
        t.attr({'src' :'_includes/img/components/toggle_icon.png'});
      } else {
        t.attr({'src' :'_includes/img/components/toggle_icon_show.png'});
      }
     });
  });
});
</script>

HTML:-

<img src="_includes/img/components/toggle_icon.png" id="#1" class="nav-toggle">

<div id="1" style="display:none">
<p>Maecenas vulputate, augue vitae sagittis molestie, ipsum neque rhoncus turpis, sit amet iaculis sapien quam sed nunc. Donec neque erat, pulvinar non ultrices sit amet, dignissim at lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi in erat sapien. Nullam mi dolor, consectetur et turpis sit am.</p></div>

```

THANKS!