div toggle script

Question

Sorry, I didnt explain this very well, I've set up what I have in jsfiddle...

basically what I'm trying to do is make it so after the first div has been opened, the second tab anchor (two) will close the first div before opening the next div?

Thanks, Gregg.

 $(document).ready(function() {
      $('.example2').hide().before('');
      $('a#toggle-example2').click(function() {
           $('.example2').slideToggle(500);
           return false;
      });
 });

 $(document).ready(function() {
      $('.item1').hide().before('');
      $('a#toggle-item1').click(function() {
           $('.item1').slideToggle(500);
           return false;
      });
 });

What does the before('') do ???

adeneo
– adeneo

2012-08-24 16:34:02 +00:00
Commented Aug 24, 2012 at 16:34 — adeneo
– adeneo, Commented Aug 24, 2012 at 16:34
Show us html or put it on jsfiddle.com

Adil
– Adil

2012-08-24 16:34:02 +00:00
Commented Aug 24, 2012 at 16:34 — Adil
– Adil, Commented Aug 24, 2012 at 16:34

palerdot · Accepted Answer · 2012-08-24 17:04:03Z

1

$('a#toggle-item1').click(function() {

An id should uniquely identify one element in a page . . . .if you are using ID 'toggle item 1' for other divs this won't work . . . .try using unique ids or a class

edited Aug 24, 2012 at 17:04

answered Aug 24, 2012 at 16:33

palerdot

7,6625 gold badges45 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mplungjan · Accepted Answer · 2012-08-24 16:35:31Z

0

 $(document).ready(function() {
      $('.item1').hide();
      $('.item1').click(function() {
           $('.item1').not(this).hide();
           $(this).slideToggle(500);
           return false;
      });
 });

answered Aug 24, 2012 at 16:35

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

adeneo · Accepted Answer · 2012-08-24 16:42:24Z

0

Set a toggle_item class on the <a> elements, and do:

<a href="#" class="toggle-item">link 1</a>
<div class="item">content 1</div>

<a href="#" class="toggle-item">link 2</a>
<div class="item">content 2</div>

js:

$(function() {
      $('.item').hide();
      $('a.toggle-item').click(function() {
           $(this).next('.item').slideToggle(500);
           return false;
      });
});

FIDDLE

edited Aug 24, 2012 at 16:42

answered Aug 24, 2012 at 16:36

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

burmat · Accepted Answer · 2012-08-24 16:51:26Z

0

There may be a shorter method but this should work (demo: http://jsfiddle.net/6N4kJ/13/):

// When item 1 is clicked           
$('#item1').click(function() {
    // if item 2 is visible
    if ($('.item2').is(':visible')) {
        // hide (toggle) item2, and when finished..
        $('.item2').slideToggle(500, function() {
            // toggle item1
            $('.item1').slideToggle(500);
        });
    // else, just hide item1
    } else {
        $('.item1').slideToggle(500);
    }
});

edited Aug 24, 2012 at 16:51

answered Aug 24, 2012 at 16:37

burmat

2,5481 gold badge23 silver badges28 bronze badges

Collectives™ on Stack Overflow

div toggle script

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related