Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Only Load Hidden Div onClick

    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: By clicking the info or photo tabs you will see the toggle for hidden divs

    Code for my tabs:
    PHP Code:
    <?php if( $page <= and !$public ) { ?>
    <div id="mngl-profile-tab-control">
    <ul>
      <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>

    </ul>
    </div>
    <?php ?>

    Code for one of the tabs content. The class mngl-hidden is just a display:none
    PHP Code:
    <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>

    <?php
        
    //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)
            
    $this->display_board_post($fav_post,$public);
        }
        
    /*$this->display_board_post('5705',$public);*/
        //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 ?>

    </div>
    Javascript that Sets Active Tab
    Code:
    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');
      jQuery('.mngl-profile-tab').hide();
      if((tab != 'board') && (tab != 'fav')){
      	jQuery('.mngl-board-post').hide();
      } else {
      	jQuery('.mngl-board-post').show();
      }
      jQuery('#mngl-' + tab + '-tab').show();
    }
    Last edited by ccarrin2; 03-01-2012 at 03:55 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •