www.webdeveloper.com
Results 1 to 3 of 3

Thread: Show more/less butoon

  1. #1
    Join Date
    Jun 2013
    Posts
    3

    Question Show more/less butoon

    I know this requires a combination of javascript and HTML, because iv done it before, but for some reason, when I try it, it doesnt work.

    If anyone can really break this down to the most simplest form for me to simply copy and paste into my site, because I am expected to have my wbesite done for my school tomorrow (Monday), and this is literally the last error I need to
    resolve.

    Heres the issue: Making a show more and show less tab onclick

    Heres the code:
    HTML Code:
    <div id="term1" style="height: 10px; overflow: hidden;">
              <br />
    
    <br />
    <br>
    <a href="Img/banner1.png"><img src="Img/banner1.png" /></a>
    <br />
    <a href="Img/banner2.png"><img src="Img/banner2.png" /></a>
    <br />
    </div><p class="continued" style="display:none;"></p><div id="term1-link"><a href="#" class="adjust" style="color:lightgreen;">Semester 1 ▼</a></</div>
    <script language="javascript">
    $('#term1-link').on('click', function(){
    $('#term1').toggle();
    });
    </script>

  2. #2
    Join Date
    Jun 2013
    Posts
    10
    well here is a simpler version of it im not much of an expert but this should work:<script type="text/javascript" language="JavaScript"><!--
    function HideContent(d) {
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    document.getElementById(d).style.display = "list-item";
    }
    function ReverseDisplay(d) {
    if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
    else { document.getElementById(d).style.display = "none"; }
    }
    //--></script>More<br/>
    <a href="javascript:ShowContent('uniquename')" backgorund="orange">
    Click to show.
    </a>
    <div id="uniquename" style="display:none;">
    <p>"your content goes here"</p>
    <a href="javascript:HideContent('uniquename')">
    hide
    </a>
    </div>
    although i think you meant show LESS this is simply hide all): i hope this is what you were looking for...oh and images do work for this too if thats what this is for

  3. #3
    Join Date
    Jun 2013
    Posts
    3

    Wink

    Quote Originally Posted by html/java/php View Post
    well here is a simpler version of it im not much of an expert but this should work:<script type="text/javascript" language="JavaScript"><!--
    function HideContent(d) {
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    document.getElementById(d).style.display = "list-item";
    }
    function ReverseDisplay(d) {
    if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
    else { document.getElementById(d).style.display = "none"; }
    }
    //--></script>More<br/>
    <a href="javascript:ShowContent('uniquename')" backgorund="orange">
    Click to show.
    </a>
    <div id="uniquename" style="display:none;">
    <p>"your content goes here"</p>
    <a href="javascript:HideContent('uniquename')">
    hide
    </a>
    </div>
    although i think you meant show LESS this is simply hide all): i hope this is what you were looking for...oh and images do work for this too if thats what this is for
    THANK YOU SO MUCH! It works perfectly, exactly what I wanted in a different form, but it works amazingly. Thanks
    so much.

    And yes, there are images on the site too for projects, that are also contained, but there are also videos and just pure paragraphs of texts on some pages that I need this to work for too.
    Again, thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles