Novice coder - apologies for any stupid comments

I've been trying to make a show more button on one of the div s on my Wordpress blog page. I've looked at a number of tutorials that all seem to agree that JavaScript / jQuery is the only way to do it.

Many solutions rely on the creation of two seperate divs that you can toggle 'display:none' for however the div is filled using a foreach argument that cannot be split (to my knowledge)

What would be really helpful is if I could simply override the max height setting (instead of having to split it into multiple divs) and simply allow the div to fill to its own desired height on the click of a link.

This page talks about setting a height: https://stackoverflow.com/questions/5531306/change-div-height-onclick-with-animation



but gives no explanation as to how to implement it...

Implementing Java into wordpress is hard for a beginner level coder as a lot of the info on sites like Wordpress.Codex already assumes too much knowledge of the workings of javascript. Whilst my php isn't that shabby I know NOTHING about java and find it tough to break the surface of how to use it.

Not looking for people to do it for me - simply any help would be really appreciated to get me off the ground with this.


The solution I ended up using through lack of understanding and topic being closed: Although I recommend using Joey Yax's suggestion as it seems far more robust and had nice animations. I couldn't get the same effect to work from being able to click the link however and this prevented use on mobile / touch screen devices.

The div in question below is called 'members-dir-list' & I also had to change the CSS from max-height:100px; to simply height:100px; for the code to work.

<span id="expandthis" onClick = "javascript:document.getElementById('members-dir-list').style.height = 'auto'; document.getElementById('expandthis').style.display = 'none'; document.getElementById('shrinkthis').style.display = 'block';">Show More</span>
    <span id="shrinkthis" onClick = "javascript:document.getElementById('members-dir-list').style.height = '100px'; document.getElementById('shrinkthis').style.display = 'none'; document.getElementById('expandthis').style.display = 'block';">Show Less</span>

The three javascript entries in the onClick commands 1. Adjust height 2. Hide the Current Link. 3. Show the other link.

My span styling had been made to look like hyperlinks to avoid having to use <a href="#" and getting thrown to the top of the page.

  • Do I understand right that you have trouble implementing this in WP context? What exactly are you working on — your own theme, trying to customize existing one? – Rarst Jun 17 '14 at 15:54
  • Hi there, thanks for your reply. Yes I am having trouble in a WP context as it is not coding from pure HTML. The box in question is for a guestlist which I would like to hide mostly but let people expand it on clicking a link. The trouble is I have NO experience with JavaScript - only php and I am using a foreach to call the guestlist. I cannot therefore split the div into two to show and hide. This is to edit a custom theme. – Bysander Jun 17 '14 at 16:09
  • Apologies for giving the impression of off-topic. I am trying to implement jQuery in WP which joey yax understood and responded in a WP specific context. Whilst it is to do with a custom theme there is nothing specific to that theme and I believe other WP users will find this answer informative. – Bysander Jun 18 '14 at 10:23
  • For starters read Codex: Ajax. Additionally inform yourself about jQuery noConflict Wrappers (Codex: wp_enqueue_scripts). – Nicolai Jun 18 '14 at 11:19
  • Given that this wasn't allowed on WPSE I've had to commit a supposed JS sin and code it all inline. Answer edited into question. Thanks everyone for their comments and suggestions, particularly @JoeyYax – Bysander Jun 18 '14 at 15:33

You'll need to load jQuery and your custom script file into WordPress first. Do this using wp_enqueue_scripts. Put this in functions.php in your theme directory. Make sure the path to the script file (I called it main.js here) is correct for your environment.

function mytheme_load_js() {

  // load in jquery
  wp_enqueue_script( 'jquery' );

  // register and load site js
  wp_register_script( 'mytheme_js', get_template_directory_uri() . '/js/main.js', '', '1.0', true );
  wp_enqueue_script( 'mytheme_js' );
  return true;

// load js
add_action( 'wp_enqueue_scripts', 'mytheme_load_js' );

This will load jQuery and your custom javascript into the footer. If the last argument in wp_register_script is set to true the script will be injected in place of wp_footer in your template files, otherwise it will go into the header where wp_header.

Now, the jQuery you posted is pretty close to what you need. here's the JS to expand the div. This could be adapted to both expand and shrink the div if it needs to be toggle-able, but I'm just going to go over how to expand. All you should really have to change here is the name of the div containing the friends.

var $friends = $( '.buddypress-friends' );
$( document ).ready( function() { // wait until the DOM is loaded...
  $friends.on( 'click', function( e ) {
    var current_height = $( this ).outerHeight(); // get the current height of the friends div
    var new_height = $friends[0].scrollHeight; // get the actual height of the div as if a max-height or height were not set
    var animation_duration = 500; // duration in milliseconds for the animation to last
    $friends.css({ height: current_height, maxHeight: new_height }) // set the initial height and the max-height of the friends div. Since these are defined inline they will override properties set in your stylesheet
            .animate({ height: new_height }, animation_duration ); // animate the new height
  } );
} );

While the above JS would work just fine I'd suggest removing the .animate portion of the script and letting CSS do the animation since CSS animations are typically faster and smoother.

  max-height: 100px;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
| improve this answer | |
  • Wow ok - thank you for your extremely detailed and helpful reply @JoeyYax When you talk about path to the script file do you mean I should save the original posted code as a file called "main.js" and edit the path to point to that? – Bysander Jun 18 '14 at 10:20
  • No, your script doesn't have to go into main.js - I just mean to update the path to the script file so it reflects your setup. get_template_directory_uri() will give you the url and dir path to the template file, you'll just need to fill in the rest of the path. – Joey Yax Jun 18 '14 at 16:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.