CODEWITHSUNDEEP
javascriptjqueryhtmlcss
karen Hunter
karen Hunter

Reputation: 53

simple show/hide toggle when clicking on a swap/toggle image

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!

Upvotes: 2

Views: 2047

Answers (2)

lordkain
lordkain

Reputation: 3109

http://jsfiddle.net/HHguX/2/

<ul>
    <li>
<div class="toggle_head togglebackground">
    &nbsp;<img src="images/expand.png" alt="Expand" title="Expand" class="expand">
    &nbsp;<img src="images/collapse.png" alt="Collapse" title="Collapse" class="collapse">
    <label> Cookies</label>
</div>
<div class="box toggle_body">
    <ul class="list">
        <li>
           <label disabled="disabled">Information about cookies.....</label>
        </li>
    </ul>
</div>
<!-- !END section (Cookies) -->
</li>
<li>
<div class="toggle_head togglebackground">
    &nbsp;<img src="images/expand.png" alt="Expand"  class="expand">
    &nbsp;<img src="images/collapse.png" alt="Collapse"  class="collapse">
    <label> Terms</label>
</div>
<div class="box toggle_body">
    <ul class="list">
        <li>
           <label disabled="disabled">Information about terms and conditions.....</label>
        </li>
    </ul>
</div>
<!-- !END section (Terms) -->

</li>
</ul>

$(".toggle_body").hide();
$(".collapse").hide();

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

var $this = $(this);

$this.next(".toggle_body").slideToggle(300, function() {
  $this.children('img').toggle();
});

});

Upvotes: 1

S&#233;bastien
S&#233;bastien

Reputation: 12139

Here is my solution which involves an element used as a trigger (on click) for the next element.

The trigger element reflects the state of the next container (open or closed) with a class. On startup the script check whether the trigger says the next element should be visible or not and then applies then open/close class to that container:

Here is a fiddle to play with http://jsfiddle.net/7EWTG/

JavaScript

jQuery(document).ready(function() {

    jQuery('.toggle-next').each(function(index) {
        var nextEl = jQuery(this).next();

        if(nextEl.is(':visible') ) {
            jQuery(this).addClass('open');
        }
        else {
            jQuery(this).removeClass('open');
        }
    });

    jQuery('.toggle-next').on('click', function(event){
        var nextEl = jQuery(this).next();

        nextEl.toggle('fast', function() {

            if(jQuery(this).is(':visible') ) {
                jQuery(this).prev().addClass('open');
            }
            else {
                jQuery(this).prev().removeClass('open');
            }

        });
    });
}); // jQuery ready

HTML

    <p class="toggle-next">Toogle next content</p>

    <div class="hide">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

Basic CSS

.hide {
    display:none;
}
.toggle-next {
    color:#000;
    cursor:pointer;
}
.toggle-next.open{
    color:#0f0;
}

Obviously this does not use the same approach as yours. You would have to use the CSS declarations to add a background image to the default .toggle-next state and .toggle-next.open but I thing this is much cleaner.

It's certainly not perfect but once you have this system in place you can reuse it and you don't have to worry about the initial state of the "toggleable" element and its trigger or their respective ids.

Upvotes: 1

Related Questions