jQuery/HTML Extend DIV

Question

I'm using jQuery to extend a div to show more information (which is in a div). However, when I click the "show more" link, how can I make it so it'll extend the div as well?

Here's a preview of my project: http://i55.tinypic.com/2uzrtat.png

Notice the "Solo" box. How can I extend it to the bottom if the "see more" link is clicked, and vice-versa?

-- My Code --

$(document).ready(function() {
  $('#slickbox').hide();
 
  $('#slick-toggle').click(function() {
    $('#slickbox').toggle(300);
    $('.column').animate({height:1000+'px'});
  });
});

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Edit:

$('#seemore').toggle(
  function(){
      $('#solo').animate({height:700+'px'});
      $(this).html('See Less');
      },
  function(){
      $('#solo').animate({height:500+'px'});
      $(this).html('See More >>');
   });

switch 700 to whatever you want the height of the Solo box to be and 500 to whatever the original height is

See a working Example: http://jsfiddle.net/G9z37/4/

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 28, 2011 at 3:12

Linens

7,99213 gold badges54 silver badges73 bronze badges

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

5 Comments

Spencer Over a year ago

Exactly what I'm looking for. However, when I close the div, the height still remains 700px+

Linens Over a year ago

sorry I was too lazy to change the div names

Spencer Over a year ago

@Ima Okay, now my problem. I have multiple "hidden" divs, which, when I click the "see more" link, I need to extend. However, I'm noticing that if I have more than one #solo, then it will only affect one of them, not all of them.

Linens Over a year ago

thats because #solo is an id. if you want all of them to be affected change it to a classname i.e .solo

Spencer Over a year ago

Perfect! I just need help with one more thing (sorry, I'm not good with jQuery). I need, so when the expand link is clicked, the text of it will change to something like "See Less". How could I do this?

Tieson T. · Accepted Answer · 2011-04-28 03:11:29Z

0

I'm assuming you want a collapsible div (hidden by default, then expand on click). If that is true, look into the Accordion extension in the JQuery UI plugins, found at http://jqueryui.com/demos/accordion/. It's relatively straightforward to implement, too. If this isn't what you're after, please say so.

answered Apr 28, 2011 at 3:11

Tieson T.

21.2k6 gold badges82 silver badges99 bronze badges

Comments

Tristian · Accepted Answer · 2011-04-28 03:11:56Z

0

You could use the jquery toggle API

answered Apr 28, 2011 at 3:11

Tristian

3,5427 gold badges32 silver badges49 bronze badges

Comments

Derek · Accepted Answer · 2011-04-28 03:57:21Z

0

If you are looking to restore it back to the original height, you will probably want to store the original height with .data(), and revert back to it when toggled off.

See http://jsfiddle.net/S8yuG/

answered Apr 28, 2011 at 3:57

Derek

6896 silver badges7 bronze badges

Comments

Pang · Accepted Answer · 2016-12-31 03:59:10Z

0

I'm not completely sure what you're asking, but if you want to change the height of a div, jQuery has a height function.

$("#solo").height(200);  // or whatever you need

Is this what you wanted?

edited Dec 31, 2016 at 3:59

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Apr 28, 2011 at 3:13

Chris Rogers

1,8731 gold badge16 silver badges18 bronze badges

Collectives™ on Stack Overflow

jQuery/HTML Extend DIV

5 Answers 5

See a working Example: http://jsfiddle.net/G9z37/4/

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

See a working Example: http://jsfiddle.net/G9z37/4/

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related