On click function not working

Question

i have this on click function which is meant to adjust the conatiner height, bit like a toggle but does not seem to work:

JSFIDDLE: http://jsfiddle.net/0tb115ez/1/

JS:

$(function() {
    // The height of the content block when it's not expanded
    var adjustheight = 240;
    // The "more" link text
    var moreText = "Click to read more...";
    // The "less" link text
    var lessText = "Click to read less...";
    // Sets the .more-block div to the specified height and hides any content that overflows
    $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
    // The section added to the bottom of the "more-less" div
    $(".more-less").append('<p><a href="#" class="adjust"></a></p>');
    $("a.adjust").text(moreText);

    $(".adjust").on("click",function(e) {
        $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
        // Hide the [...] when expanded
        $(this).parents("div:first").find("p.continued").css('display', 'none');
        $(this).text(lessText);
    }, function() {
        $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
        $(this).parents("div:first").find("p.continued").css('display', 'block');
        $(this).text(moreText);
    });

});

.click() only receives one callback, not too. You'll need to handle the toggling in the click function on your own. Also, since you're using an anchor tag, you'll probably want to add e.preventDefault(); as your first statement in the callback to keep the link from refreshing the page. — War10ck
– War10ck, Commented Sep 18, 2014 at 15:49
Sidenote: If you're referring to the toggle handler with syntax: .toggle(function, function), I feel the need to also point out that was deprecated in jQuery 1.8 and removed in 1.9. — Stryner
– Stryner, Commented Sep 18, 2014 at 15:52
im new to this so dont really understand how to do teh toggle inside but ill try thanks — James Brandon
– James Brandon, Commented Sep 18, 2014 at 15:53
yea toggle was hence why not using, but not sure how else to do it now as using 2.1 — James Brandon
– James Brandon, Commented Sep 18, 2014 at 15:53
You can use a class to do first case if class is missing, add it and if class is present, do the other case and remove it. — Loenix
– Loenix, Commented Sep 18, 2014 at 16:02

Jimmy · Accepted Answer · 2014-09-18 16:00:53Z

Give this a shot:

$(function() {
    // The height of the content block when it's not expanded
    var adjustheight = 240;
    // The "more" link text
    var moreText = "Click to read more...";
    // The "less" link text
    var lessText = "Click to read less...";
    // Sets the .more-block div to the specified height and hides any content that overflows
    $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
    // The section added to the bottom of the "more-less" div
    $(".more-less").append('<p><a href="#" class="adjust"></a></p>');
    $("a.adjust").text(moreText);

    $(".adjust").on("click",function(e) {
      if ($(this).parents("div:first").find(".more-block").css('overflow') == 'hidden')
      {
        $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
        // Hide the [...] when expanded
        $(this).parents("div:first").find("p.continued").css('display', 'none');
        $(this).text(lessText);
      } else {
        $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
        $(this).parents("div:first").find("p.continued").css('display', 'block');
        $(this).text(moreText);
      }
    });

});

Basically we just check if it's expanded first. If it is shortened, we expand. If it's already expanded, we shorten it. It would probably be more clear if you were to add some sort of attribute to track whether the block is expanded, and check that instead of the overflow property.

iCollect.it Ltd · Accepted Answer · 2014-09-18 16:16:03Z

Too late, but here is a cleaner version. It toggles a class on the link itself for simplicity (also allows the links to change styling):

JSFiddle: http://jsfiddle.net/TrueBlueAussie/0tb115ez/20/

$(function () {
    // The height of the content block when it's not expanded
    var adjustheight = 240;
    // The "more" link text
    var moreText = "Click to read more...";
    // The "less" link text
    var lessText = "Click to read less...";
    // Sets the .more-block div to the specified height and hides any content that overflows
    $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
    // The section added to the bottom of the "more-less" div
    $(".more-less").append('<p><a href="#" class="adjust"></a></p>');
    $("a.adjust").text(moreText);

    $(".adjust").on("click", function (e) {
        var $this = $(this);
        // Toggle a class and see if it "was" set (hence !)
        var more = !$this.toggleClass('moreactive').hasClass('moreactive');
        var $parents = $this.parents("div:first");
        var pcont = $parents.find("p.continued");
        var $more = $parents.find(".more-block");
        $more.css('height', more ? adjustheight : 'auto').css('overflow', more ? 'hidden' : 'visible');
        pcont.css('display', more ? 'none' : 'block');
        $this.text(more ? moreText : lessText);
    });

});

bhavya_w · Accepted Answer · 2014-09-18 15:59:55Z

0

Here somecontainer is something which gets toggled everytime we click on adjust.

 $(".adjust").on("click",function(e) {
            check if somecontainer is visible
           if($(somecontainer).is(':visible')){
              //

               $(somecontainer).hide();
          }
          else{
              //

               $(somecontainer).show();
          }

  });

answered Sep 18, 2014 at 15:59

bhavya_w

10.3k9 gold badges33 silver badges42 bronze badges

Collectives™ on Stack Overflow

On click function not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related