CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Parth Kapadia
Parth Kapadia

Reputation: 443

Using jQuery to Hide/Show Content

I am having a website that basically shows information related to a business house. I do not want to have a multi page website (for about us, contact us and other such pages), but I have a considerable amount of content to be shown.

And I would not prefer to load content again and again through consecutive fetches from the server through AJAX.

So, can I have all my content loaded on the first load itself and have only the required content shown (visible) and hide and show the appropriate content using jQuery. Is it a proper approach that can be adopted ? What are its possible disadvantages ?

Upvotes: 0

Views: 76

Answers (2)

Emil S. Jørgensen
Emil S. Jørgensen

Reputation: 6366

What you are asking can be achieved with a Singlepage framework like: http://alvarotrigo.com/fullPage/ or AngularJS

Pros:

  • Front-end access to all content immediately

Cons:

  • Long page load which might result in 404 or slow connection
  • Dependent on user device. If user doesn't have a current browser then your page might break.
  • Client might not have JavaScript enabled, breaking your website completely
  • If there is a lot of data, then the user device might not be able to handle it. JavaScript can be quite taxing on older devices.

EDIT 1

My personal preference for Singlepage solutions is AngularJS, so if you are interested in this i would recommend this tutorial:

scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating

Upvotes: 2

Naveed Ramzan
Naveed Ramzan

Reputation: 3593

<a href="#about-us" title="About Us">About Us</a>

<div id="about-us" class="content">Some content here</div>


<script>
    $(document).ready(function(){
        $('a').click(function(){
            var link = $(this).attr('href');
            $('.content').hide();
            $(link).show();
        });
    });
</script>

Upvotes: 0

Related Questions