0

I am trying to create a toggle button with .details. On first load, it should just display as "Display [+]" with .details-display hidden. When the text is clicked, it should change to "Display [-]" with .details-display slid down. Why isn't this working?

HTML

<div class="slide-caption">
    <span class="details">Details[+]</span>
    <span class="details-display">The connecting walkway floats above the second story of the Main hall, joining the North and the South wings.</span>
</div>

JS

$('span.details').toggle(function(){
    $(this).html('Details[-]');
    $(this).parent().find("span.details-display").slideDown("slow");
}, function() {
    $(this).html('Details[+]');
    $(this).parent().find("span.details-display").slideUp("slow");
});

CSS

.details-display {
    display: none;
}

http://jsfiddle.net/xrzcu0na/1/

Ivan Gerasimenko
  • 2,381
  • 3
  • 30
  • 46
J82
  • 8,267
  • 23
  • 58
  • 87
  • Two callback functions to toggle()? There's something wrong here. From jQuery's documentation : `.toggle( duration [, easing ] [, complete ] )` http://api.jquery.com/toggle/ – Jeremy Thille Feb 25 '15 at 13:46

4 Answers4

4

Here is an updated working version of your jsFiddle:

http://jsfiddle.net/xrzcu0na/6/

I changed the code to this:

var toggled = true;
$('span.details').click(function () {
    if (toggled) {
        $(this).html('Details[-]');
    } else {
        $(this).html('Details[+]');
    }
    toggled = !toggled;
    $(this).parent().find("span.details-display").slideToggle("slow");
});

Which adds a click handler to toggle elements on click.

winhowes
  • 7,845
  • 5
  • 28
  • 39
  • Thank you. I applied it [here](http://keebs.com/dax) on the first slide but there is a slight jump when I click the 'details' text. Do you know why that would happen? I'll accept your answer in 2 minutes. – J82 Feb 25 '15 at 13:52
  • Yeah, that jump is jQuery changing the css from `hidden` to `block` or `inline-block` and once that happens, the element takes up a bit of space even though it hasn't fully been shown yet – winhowes Feb 25 '15 at 13:57
  • See if this helps: http://stackoverflow.com/questions/1335461/jquery-slide-is-jumpy – winhowes Feb 25 '15 at 20:47
  • I was just looking at that question actually. :/ I tried adding in a fixed width but it didn't work. – J82 Feb 25 '15 at 20:51
0

Because you haven't conditioned on the clicking event.

Right now both functions are executed as soon as the event $(document).ready() has taken place, not when any mouse click takes place.

Also, note that the function .toggle() hides elements: jQuery API.

A better version would be:

$('span.details').click(function() {
    $('.details-display').slideToggle("slow");

    if ( $('.details').html() == 'Details[+]' ) {
        $('.details').html('Details[-]');
    } else {
        $('.details').html('Details[+]');
    }
});

where I used the function .slideToggle()

Jean-Paul
  • 19,910
  • 9
  • 62
  • 88
0

Use the below script also updated the JSFiddle http://jsfiddle.net/xrzcu0na/10/ 

  $(function(){
    $('span.details').click(function(){
        if($(this).next("span.details-display").is(":visible"))
        {
             $(this).html('Details[+]');
             $(this).next("span.details-display").slideUp("slow");
        }
        else
        {     $(this).html('Details[-]');
              $(this).next("span.details-display").slideDown("slow");
        }
    });
})

Worked for me

Hope this helps.

Frebin Francis
  • 1,905
  • 1
  • 11
  • 19
0

That usage of $.toggle() is deprecated:

version deprecated: 1.8, removed: 1.9

I'm guessing you're using version 1.9 or later, so it doesn't exist. $.toggle() is now only used for animation show/hide (can't link because of new user restrictions). Instead of binding alternating click events to the object, it's used to show/hide the selected element.

Building on winhowes's answer, you can eliminate the little "hop" by having the details display under the button: http://jsfiddle.net/a6s1t2d4/

I also changed the two function calls ($.parent() and $.find()) to one ($.nextAll(); not just $.next() because the next element is now a <br />).

Hutch Moore
  • 124
  • 1
  • 12
  • Thank you. I just tried your fiddle but it wasn't working. I didn't know that `$.toggle()` has been deprecated so I'd like to switch up my code. – J82 Feb 25 '15 at 19:34
  • That's weird. It keeps saying `ReferenceError: $ is not defined`. It wasn't doing that before. – Hutch Moore Feb 25 '15 at 20:05
  • Oh, I found the problem. It was complaining about mixed content, so jQuery didn't get loaded. The problem was that the page was being loading using the "https" protocol. jsFiddle must have added the "s" at some point. Sorry, this is my first time using jsFiddle. I updated my answer. – Hutch Moore Feb 25 '15 at 20:11
  • Thank you. However, as I look over your fiddle, I don't understand what is functionally different than winhowes' answer. I noticed that you added the `
    ` and changed `$.parent()` and `$.find()` to `$.nextAll()` but this still doesn't eliminate the slight jump for me.     – J82 Feb 25 '15 at 20:20
  • Maybe we're talking about different things when we say "slight jump". On winhowes's fiddle, when I (using Firefox) click on the button, it does a brief dip and comes back up. When closing the details display, it happens as soon as the button is clicked. When opening the details display, it only happens once the details display has finished showing. That's what my fiddle fixes: the button doesn't do the "dip" at all. – Hutch Moore Feb 25 '15 at 21:59
  • @J82 was that what you were referring to? My fiddle fixes the issue that I described (for me, at least; tested in Firefox, Chrome, and IE). – Hutch Moore Feb 27 '15 at 04:01