Load multiple content with jquery in same page

Question

in this code my defualt page is "Your Friends" and i can load only one section named is "Your Friends Requests" but i want to load my other sections with jquery but i have no idea how i can load other ones??

my menu is:

            <ul class="nav nav-tabs nav-tabs-info" id="nav">
                <li class="active"><a>Your Friends</a></li>
                <li><a href="#" id="call-requests">Your Friends Requests</a></li>
                <li><a href="#" id="call-incoming">Incoming Friends Requests</a></li>
                <li><a href="#" id="call-send">Send Friends Requests</a></li>
            </ul>

and my sections is:

          <section class="main-content"  id="Friends">
            <div class="page-heading">
            <h1 class="caption">Your Friends</h1>
            </div>
          </section>

    <section class="main-content"  id="requests" style="display:none;">
            <div class="page-heading">
            <h1 class="caption">Your Friends Requests</h1>
            </div>
          </section>

    <section class="main-content"  id="incoming" style="display:none;">
            <div class="page-heading">
            <h1 class="caption">Incoming Friends Requests</h1>
            </div>
          </section>

    <section class="main-content"  id="send" style="display:none;">
            <div class="page-heading">
            <h1 class="caption">Send Friends Requests</h1>
            </div>
          </section>

and script code i used is:

        <script>
            $(document).ready(function(){
                $('#call-requests').click(function(){
                var toLoad = $(this).attr('href')+' #friends';
                $('#friends').hide('fast',loadContent);
                $("#loading_full").fadeIn('normal');
                function loadContent() {
                    $('#friends').load(toLoad,'',showNewContent())
                }
                function showNewContent() {
                    $('#requests').show('normal',hideLoader());
                }                
                function hideLoader() {
                $("#loading_full").fadeOut('normal');
                }
                return false;
                });
            });
        </script>

i will be thankful if someone help me how i can load my other sections.

Demo fiddle here http://jsfiddle.net/akhurshid/NuwE6/ and This may help you,http://stackoverflow.com/questions/11716777/html5-loading-data-section-when-click-on-navigation-link — A l w a y s S u n n y, Jun 15 '14 at 16:50
Copy your entire `#call-requests` click handler and change the target to the other menu items. — bloodyKnuckles, Jun 15 '14 at 16:52
sorry but i confused i tried to do this for 4h but fail can i ask you make new and complete script for my case?.very thanks — user3742640, Jun 15 '14 at 16:56

score 1 · Answer 1 · edited Mar 09 '18 at 09:18

This may work as your requirement.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<h1>Load Contents Using jquery</h1>

<ul id="myMenu">
  <li><a href="#" data-id="Friends">Friends</a></li>
  <li><a href="#" data-id="requests">Requests</a></li>
  <li><a href="#" data-id="incoming">Incoming</a></li>
  <li><a href="#" data-id="send">Send</a></li>
</ul>



<section class="subcontent"  id="Friends" style="display:block" >
        <div class="page-heading">
        <h1 class="caption">Your Friends</h1>
        </div>
      </section>

<section class="subcontent"  id="requests" >
        <div class="page-heading">
        <h1 class="caption">Your Friends Requests</h1>
        </div>
      </section>

<section class="subcontent"  id="incoming" >
        <div class="page-heading">
        <h1 class="caption">Incoming Friends Requests</h1>
        </div>
      </section>

<section class="subcontent"  id="send">
        <div class="page-heading">
        <h1 class="caption">Send Friends Requests</h1>
        </div>
      </section>




<script type="text/javascript">

$(document).ready(function()
{
 $(".subcontent").hide();
 $("#Friends").show(); //show initial friends list

$('#myMenu').on('click','a',function()
{
    // fade out open subcontents
    $('.subcontent:visible').hide();
    // fade in selected subcontent
    $('.subcontent[id='+$(this).attr('data-id')+']').fadeIn();
  });
});
</script>

<style type="text/css">
 div.subcontent { display:none; }
</style>

Load multiple content with jquery in same page

1 Answers1