Announcement

Collapse
No announcement yet.

Please help me to add javascript code to expand/collapse content

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Please help me to add javascript code to expand/collapse content

    Hello Experts,

    I want to add expand/collapse javascript code to the internal pages of my website because they are too long and doesn't look user-friendly.
    As I'm not a coder I have no idea how to do it. The biggest problem is that the site is custom written so I can't use any plugins. The best way is to apply a code which will fold the content after certain length of all pages.

    I have no idea on what system the website is written but here is an example page: http://my8ballpool-hack.com/

    As you can see the page is too long and doesn't look good. I will be vary happy if you can review the website and guide me on how to add this javascript code myself.

    P.S.: I have the admin panel and can edit pages/posts so if you can give me some code to apply directly on the pages content that will great.

    Kind Regards,
    Jeff

  • #2
    You already have a script on your front page that does exactly what you're describing. Why don't you just duplicate that script for your inside pages?

    Anyway, below is a bare-bones script that will work. It's not fancy and it's not styled, but it provides the basics. More than that will entail lots more code.

    Code:
     <p>The stuff above</p>
       
      <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 CONTENTS";
               }
          else {
               ele.style.display = "block";
               text.innerHTML = "HIDE CONTENTS";
            }
       } 
      </script>
       
      <a id="displayText" href="javascript:toggle();">SHOW CONTENTS</a>
       
      <div id="toggleText" style="display: none">
       
           <h1>Headline</h1>
       
           <p>Whatever other content you have can go in this spot</p>
       
      </div>
       
      <p>The stuff below</p>

    Comment


    • #3
      Thanks a lot for the information, to be honest one of my friends done most of the front page, thanks a lot for the help mate means a lot!

      Comment


      • #4
        Hi Shakibhasan and welcome to GDF.

        If your friend designed the site, I would recommend getting that same friend to make changes.

        We ask all new members to read very important links here and here. These explain the rules, how the forum runs and a few inside jokes. No, you haven't done anything wrong, we ask every new member to read them. Your first few posts will be moderated, so don't panic if they don't show up immediately. Enjoy your stay.
        Shop smart. Shop S-Mart.

        Comment

        Search

        Collapse

        Sponsor

        Collapse

        Incredible Stock

        Latest Topics

        Collapse

        • PrintDriver
          Reply to Happy Thanksgiving!
          PrintDriver
          Happy Thanksgiving to all!
          Just waiting for dinner to finish cooking. We are eating fashionably late this year. Mainly because the bird was larger than expected, but that 's ok.
          Lots of hooverdoovers...
          Today, 04:17 PM
        • PanToshi
          Reply to Happy Thanksgiving!
          PanToshi
          Happy Thanksgiving!

          ...
          Today, 01:20 PM
        • B
          Reply to Happy Thanksgiving!
          B
          Happy Thanksgiving everyone (even to those of you outside the U.S.)!

          As for turkey, I worked a summer job in a Norbest butter ball turkey processing plant before college, and haven't touched...
          Today, 12:57 PM
        • Arka-Software
          Reply to Software that can do vector patterns?
          Arka-Software
          There are many software in the market which are using for vector pattern are:- 1) Inkscape 2) Xara Xtreme 3) Skencil 4) Scribus 5) VRR 6) CoceptDrow PRO 7) ZeusDraw 8) MagicTracer 9) Nodebox 10) Tgif
          Today, 12:46 PM
        • PrintDriver
          Reply to Software that can do vector patterns?
          PrintDriver
          You want a program that is used to dealing with vector axis data. Photoshop would probably be inappropriate.

          The only way I can think to do this is to have a script written for Illustrator...
          Today, 09:10 AM
        GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings
        Working...
        X