Toggle ( );

Isn’t it amazing how one little function can change your entire life? Your code life that is. Just the other day I was bombarded with a lot of content on this site that I was working on. I am talking about almost 50 pages worth of information. Having worked as a content developer for over one year means I know what is involved in the process. So I am still in awe at how my client managed to come up with all that…

Anyway, back to my 'story'. So I was left contemplating exactly how I was required to make all those pages for this one website! That site would be so heavy. All those pages would probably take it ages to load on devices. Then again, I couldn’t just squash all that information on one single page because that would lead to one which is about 400 meters long! Trust me guys, I am not exaggerating!

When they say the internet is your friend…they really do mean the internet is your best friend {Sorry real life bestie}. On here you will get anything and everything that you need under the sun. So I looked it up and I found just how I was going to be able to solve my issue. I already knew it would have something to do with JavaScript or JQuery but I didn’t know exactly how. {Someone buy me the latest edition of something for dummies please} But now that I do, I am more than willing to share.

P.S. My Sublime Text is unregistered as you can see :)
Place the JavaScript function in the head section

For magnification purposes, this is the actual function:

<script language="javascript"> 

        function toggle() {

            var ele = document.getElementById("toggleText");

            var text = document.getElementById("displayText");

            if(ele.style.display == "block") {

                    ele.style.display = "none";

                    text.innerHTML = "Show More";

                }

            else{

                   ele.style.display = "block";

                   text.innerHTML = "Show Less";

                }

            } 

</script>

This function allows one to have all the information in one page (which eliminates the need of 50 pages) but have the divs hidden and elegantly shown by toggling the control text (which reduces the length of the page). Dilemma solved as this is what I decided to go with. You can tell from my sublime text snippets. And now, I am one happy coder! Latte anyone?

Call the function here.
The area where you'd want the div to be toggled

If you have better ways of doing this because I may be a bit on the amateur side of life, feel free to let me know. I would love to hear from you and exchange notes. I will be doing more research as well. Other than that, thank you so much for reading.

Doing Cool Things That Matter

#HappyDays