Using jQuery to Hide/Show Content

Question

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 ?

It's possible to do that, but you may want to use a library like knockout.js instead of just using jQuery. However, it's not a good practice to use hidden divs with lots of content: It slows down the page load, it's hard to maintain and it might be difficult for screen readers and SEO. I downvoted your question because it is extremely broad — KWeiss
– KWeiss, Commented Feb 1, 2016 at 10:45

Emil S. Jørgensen · Accepted Answer · 2016-02-01 11:04:46Z

2

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

edited Feb 1, 2016 at 11:04

answered Feb 1, 2016 at 10:52

Emil S. Jørgensen

6,3891 gold badge17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naveed Ramzan · Accepted Answer · 2016-02-01 10:45:05Z

0

<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>

answered Feb 1, 2016 at 10:45

Naveed Ramzan

3,5893 gold badges27 silver badges33 bronze badges

Collectives™ on Stack Overflow

Using jQuery to Hide/Show Content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related