View Full Version : Only Load Hidden Div onClick

03-01-2012, 04:47 PM
My website contains a ton of hidden divs. I thought this would make everything easier for the user because now they can stay on one page and view tons of content but it is making my page load very slowly. Is there a way to not load the pages hidden content until the user clicks the link and makes it visible? I see various tutorials online but I am having trouble learning how to translate that to my site. So again this content is hidden, and an onclick makes it visible, but I would like the onclick to make it visible and load for the first time. Thank you for reading, link to site and code below.

Source: (http://www.instride.info/admin) By clicking the info or photo tabs you will see the toggle for hidden divs

Code for my tabs:

<?php if( $page <= 1 and !$public ) { ?>
<div id="mngl-profile-tab-control">
<li id="mngl-board-tab-button" class="dark"><a href="javascript:mngl_set_active_tab('board');"><span><?php _e('Board', 'mingle'); ?></span></a></li>
<li id="mngl-info-tab-button"><a href="javascript:mngl_set_active_tab('info');"><span><?php _e('Info', 'mingle'); ?></span></a></li>
<li id="mngl-log-tab-button"><a href="javascript:mngl_set_active_tab('log');"><span><?php _e('Log', 'mingle'); ?></span></a></li>
<li id="mngl-fav-tab-button"><a href="javascript:mngl_set_active_tab('fav');"><span><?php _e('Favorites', 'mingle'); ?></span></a></li>
<li id="mngl-display-photo-tab-button"><a href="javascript:mngl_set_active_tab('display-photo');"><span><?php _e('Photos', 'mingle'); ?></span></a></li>
<li id="mngl-video-tab-button"><a href="javascript:mngl_set_active_tab('video');"><span><?php _e('Videos', 'mingle'); ?></span></a></li>

<?php } ?>

Code for one of the tabs content. The class mngl-hidden is just a display:none

<div id="mngl-fav-tab" class="mngl-profile-tab mngl-hidden">
<div style="color:#171717; font-weight:bold;"><?php echo $user->first_name . "'s Favorites >> For Motivational Posts You Enjoy"?></div>

//require_once(MNGL_MODELS_PATH . "/MnglUser.php");
foreach ($fav_posts as $fav_post)
$author = MnglUser::get_stored_profile_by_id($fav_post->author_id);
$owner = MnglUser::get_stored_profile_by_id($fav_post->owner_id);

if($author and $owner)
//echo count($fav_posts).'--'.$page_size;
<?php if( count($fav_posts) >= $page_size ) { ?>
<!-- <div id="mngl-older-posts"><a href="javascript:mngl_show_older_posts( <?php echo ($page + 1) . ",'" . (($public)?'activity':'boards') . "','" . (($public)?$mngl_user->screenname:$owner->screenname) . "'"; ?> )"><?php _e('Show Older Posts', 'mingle'); ?></a></div>-->
<?php } ?>


Javascript that Sets Active Tab

function mngl_set_active_tab( tab )
jQuery('#mngl-profile-tab-control li').removeClass('mngl-active-profile-tab');
jQuery('#mngl-' + tab + '-tab-button').addClass('mngl-active-profile-tab');
if((tab != 'board') && (tab != 'fav')){
} else {
jQuery('#mngl-' + tab + '-tab').show();