Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation function showHide

    Trying to get a picture (of a tutor) to have a paragraph that expands/contracts underneath with an "about that tutor" section when the picture is clicked on (would be nice to also have it expand/contract when the div with the name is clicked)

    My problem (besides being brand new to programming ) is that I cannot seem to get the on click function to work. My paragraph loads, but stays hidden. I don't know much on java script and I don't know if I have it in the wrong place, or the code itself is wrong. I assume since the paragraph loads hidden that the css class hiding it works- but just does not switch to the visible class as I would like it to.

    Thanks for any help, this is my first webpage and so I'm sorry if I missed any needed information, let me know I'll be watching this post hoping for answer


    This is inside my <head> & <style>
    Code:
    <script language="JavaScript">
    <!--
    function showHide(HID,IMG) {
            if (document.getElementById(IMG).src.indexOf('expand') != -1) {
                    document.getElementById(IMG).src='/images/FST Apple.jpg';
                    document.getElementById(HID).className='visibleRow';
            } else {
                    document.getElementById(IMG).src='/images/FST Apple.jpg';
                    document.getElementById(HID).className='hiddenRow';
            }
    }
    // -->
    </script>
    HTML
    Code:
    	<div id="lefttutors">
    <!--Tutors Name-->
        <div id="tutorname">
        Remy
        </div>
    <!--Tutors Pic-->
        <div id="tutorpic">
        <img id="tutorpic" src="images/FST Apple.jpg" width="150" height="150" alt="Tutorpic" onClick="showHide('tutortext','tutorpic');" style="cursor:pointer;">&nbsp;
        </div>
    <!--Tutor's text-->
        <div id="tutortext" class="hiddenRow">
        <p>Test Test Test - a lot of text here. Test Test Test - a lot of text here.Test Test Test - a lot of text here.Test</p> <p>Test Test - a lot of text here.Test Test Test - a lot of text here.Test Test Test - a lot of text here.Test Test Test - a lot of text here.</p>
        </div>
       </div>
    CSS
    Code:
    #wrapper #lefttutors {
    	float: left;
    	width: 150px;
    	margin: 0px;
    	padding: 0px;
    	border: 0px none #900;
    }
    #wrapper #lefttutors #tutorpic img {
    	border-top-width: 1px;
    	border-right-width: 1px;
    	border-bottom-width: 1px;
    	border-left-width: 1px;
    	border-top-style: none;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-top-color: #900;
    	border-right-color: #900;
    	border-bottom-color: #900;
    	border-left-color: #900;
    }
    #wrapper #lefttutors #tutorname {
    	display: block;
    	float: left;
    	line-height: 35px;
    	list-style: none;
    	background: -webkit-gradient(linear, left top, left bottom, from(#F00), to(#900));
    	background: -moz-linear-gradient(top,  #f00,  #900);
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    	box-shadow: 0 1px 2px rgba(0,0,0,.2);
    	text-align: center;
    	position: relative;
    	width: 150px;
    	padding: 0;
    	margin-top: 15px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	background-color: #F00;
    	border: 1px solid #FF0000;
    	color: #FFF;
    	font-size: 24px;
    	font-weight: bold;
    	font-family: Arial, sans-serif;
    }
    .tutorpic {
    margin: 1px;
    padding: 3px 10px;
    cursor: pointer;
    position: relative;
    }
    .tutortext {
    padding: 5px 10px;
    background-color:#fafafa;
    }
    .hiddenRow {
     display:none;
     visibility:hidden;
    }
    .visibleRow {
     display:;
     visibility:visible;
    }

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    you duplicated ID names which is illegal
    Code:
        <div id="tutorpic">
        <img id="tutorpic" src="images/FST Apple.jpg" width="150" height="150" alt="Tutorpic" onClick="showHide('tutortext','tutorpic');" style="cursor:pointer;">&nbsp;
        </div>
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    #wrapper #lefttutors {
    	float: left;
    	width: 150px;
    	margin: 0px;
    	padding: 0px;
    	border: 0px none #900;
    }
    #wrapper #lefttutors #tutorpic img {
    	border-top-width: 1px;
    	border-right-width: 1px;
    	border-bottom-width: 1px;
    	border-left-width: 1px;
    	border-top-style: none;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-top-color: #900;
    	border-right-color: #900;
    	border-bottom-color: #900;
    	border-left-color: #900;
    }
    #wrapper #lefttutors #tutorname {
    	display: block;
    	float: left;
    	line-height: 35px;
    	list-style: none;
    	background: -webkit-gradient(linear, left top, left bottom, from(#F00), to(#900));
    	background: -moz-linear-gradient(top,  #f00,  #900);
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    	box-shadow: 0 1px 2px rgba(0,0,0,.2);
    	text-align: center;
    	position: relative;
    	width: 150px;
    	padding: 0;
    	margin-top: 15px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	background-color: #F00;
    	border: 1px solid #FF0000;
    	color: #FFF;
    	font-size: 24px;
    	font-weight: bold;
    	font-family: Arial, sans-serif;
    }
    .tutorpic {
    margin: 1px;
    padding: 3px 10px;
    cursor: pointer;
    position: relative;
    }
    .tutortext {
    padding: 5px 10px;
    background-color:#fafafa;
    }
    .hiddenRow {
     display:none;
     visibility:hidden;
    }
    .visibleRow {
     display:;
     visibility:visible;
    }</style>
    <script type="text/javascript">
    function showHide(HID,IMG) {
      var img=document.getElementById(IMG),txt=document.getElementById(HID);
      if (img.src.indexOf('1')!= -1) {
       img.src='http://www.vicsjavascripts.org.uk/StdImages/2.gif';
       txt.className='visibleRow';
      }
      else {
       img.src='http://www.vicsjavascripts.org.uk/StdImages/1.gif';
       txt.className='hiddenRow';
      }
    }
    </script>
    </head>
    
    <body>
    	<div id="lefttutors">
    <!--Tutors Name-->
        <div id="tutorname">
        Remy
        </div>
    <!--Tutors Pic-->
        <div >
        <img id="tutorpic" src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" width="150" height="150" alt="Tutorpic" onClick="showHide('tutortext','tutorpic');" style="cursor:pointer;">&nbsp;
        </div>
    <!--Tutor's text-->
        <div id="tutortext" class="hiddenRow">
        <p>Test Test Test - a lot of text here. Test Test Test - a lot of text here.Test Test Test - a lot of text here.Test</p> <p>Test Test - a lot of text here.Test Test Test - a lot of text here.Test Test Test - a lot of text here.Test Test Test - a lot of text here.</p>
        </div>
       </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    John Beckerleg (04-20-2013)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,158
    Thanks
    203
    Thanked 2,548 Times in 2,526 Posts
    Code:
    <html>
    <head>
    </head>
    <body onload = "showstart()"> 
    <div id = "mydiv"></div>
    
    <script type = "text/javascript">
    
    var txt = "";
    var shorttxt = "";
    function showstart() {
    
    txt = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. Morbi et metus ut diam molestie ullamcorper. Suspendisse rutrum semper semper. Donec volutpat neque in lorem tempus scelerisque. Curabitur dignissim rhoncus quam ac suscipit. Donec viverra quam lobortis neque porta a sagittis urna tristique. Suspendisse nec lacus nisi. Pellentesque fermentum massa sit amet magna hendrerit vestibulum. Sed elit libero, scelerisque eu eleifend ut, interdum gravida nunc. Etiam ut nisi sapien, et tempus sem. Nam vel mi est. Mauris congue felis ut ante bibendum vehicula. Nullam nec sapien arcu, eget cursus lorem. Donec blandit, dolor tristique ornare dictum, arcu sapien vulputate dolor, et placerat risus odio ut magna. Ut magna mauris, pellentesque at ultricies vitae, fermentum vitae dolor. <br><br>"
    
    txt += "Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus. Suspendisse at augue urna, nec tristique libero. Nulla libero elit, tempor vel aliquet id, tincidunt id ante. Etiam egestas orci in velit tristique ut ullamcorper urna egestas. Duis eget risus sem, eu aliquet arcu. Sed ac mauris et arcu interdum malesuada sed eu augue. Suspendisse quis nisi massa. Donec in egestas enim. Ut tristique luctus eros, non pretium ligula feugiat ac. Etiam non luctus sem. Integer nibh leo, interdum a condimentum quis, consectetur in leo. In aliquet facilisis tellus, quis dapibus erat posuere sed. Cras egestas massa ut quam placerat pellentesque. Sed in magna quis lorem congue ultricies. Fusce feugiat felis neque. Proin eros tortor, feugiat sit amet laoreet iaculis, gravida non quam. Curabitur lacus libero, convallis a placerat id, feugiat vitae leo. "
    
    shorttxt = txt.substring(0,100);
    
    document.getElementById("mydiv").innerHTML = shorttxt + "<font color = '#0000FF' size = '1'><a = '#' onclick='showmore();return false'>.....read more</a>";
    }
    
    function showmore() {
    document.getElementById("mydiv").innerHTML = document.getElementById("mydiv").innerHTML = txt + "<font color = '#0000FF' size = '1'><a = '#' onclick='showless();return false'>.....read less</a>";txt;
    }
    
    function showless() {
    document.getElementById("mydiv").innerHTML = shorttxt + "<font color = '#0000FF' size = '1'><a = '#' onclick='showmore();return false'>.....read more</a>";
    }
    
    </script>
    
    </body>
    </html>
    Instead of the user clicking on the links you can achieve the same effect by clicking on an image.


    Note that <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9). The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.
    Last edited by Philip M; 04-20-2013 at 07:30 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    John Beckerleg (04-20-2013)

  • #4
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Very much appreciated, I think this fixed my problems- thanks so much for the quick responses!

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,108
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    'Philip M's code looked to me like there were some copy/paste errors to the forum post.
    I deleted them and compressed the code a bit more... Hope he doesn't mind.
    Code:
    <html>
    <head>
    </head>
    <body onload = "showless()">
    <div id = "mydiv"></div>
    
    <script type = "text/javascript">
    
    var txt = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum leo, scelerisque at dapibus ac, consectetur vel ipsum. Morbi et metus ut diam molestie ullamcorper. Suspendisse rutrum semper semper. Donec volutpat neque in lorem tempus scelerisque. Curabitur dignissim rhoncus quam ac suscipit. Donec viverra quam lobortis neque porta a sagittis urna tristique. Suspendisse nec lacus nisi. Pellentesque fermentum massa sit amet magna hendrerit vestibulum. Sed elit libero, scelerisque eu eleifend ut, interdum gravida nunc. Etiam ut nisi sapien, et tempus sem. Nam vel mi est. Mauris congue felis ut ante bibendum vehicula. Nullam nec sapien arcu, eget cursus lorem. Donec blandit, dolor tristique ornare dictum, arcu sapien vulputate dolor, et placerat risus odio ut magna. Ut magna mauris, pellentesque at ultricies vitae, fermentum vitae dolor. <br><br>"
    
      txt += "Cras suscipit ullamcorper elit vitae sodales. Sed euismod felis molestie lorem gravida a venenatis risus sollicitudin. Proin accumsan lorem in est adipiscing faucibus. Suspendisse at augue urna, nec tristique libero. Nulla libero elit, tempor vel aliquet id, tincidunt id ante. Etiam egestas orci in velit tristique ut ullamcorper urna egestas. Duis eget risus sem, eu aliquet arcu. Sed ac mauris et arcu interdum malesuada sed eu augue. Suspendisse quis nisi massa. Donec in egestas enim. Ut tristique luctus eros, non pretium ligula feugiat ac. Etiam non luctus sem. Integer nibh leo, interdum a condimentum quis, consectetur in leo. In aliquet facilisis tellus, quis dapibus erat posuere sed. Cras egestas massa ut quam placerat pellentesque. Sed in magna quis lorem congue ultricies. Fusce feugiat felis neque. Proin eros tortor, feugiat sit amet laoreet iaculis, gravida non quam. Curabitur lacus libero, convallis a placerat id, feugiat vitae leo. "
    
    var  shorttxt = txt.substring(0,100);
    
    function readless() { return "<font color = '#0000FF' size = '1'><a = '#' onclick='showless();return false' style='cursor:pointer'>.....read less</a></font>"; }
    function readmore() { return "<font color = '#0000FF' size = '1'><a = '#' onclick='showmore();return false' style='cursor:pointer'>.....read more</a></font>"; }
    
    function showmore() { document.getElementById("mydiv").innerHTML = txt + readless(); }
    function showless() { document.getElementById("mydiv").innerHTML = shorttxt + readmore(); }
    
    </script>
    
    </body>
    </html>

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,158
    Thanks
    203
    Thanked 2,548 Times in 2,526 Posts
    Quote Originally Posted by jmrker View Post
    'Philip M's code looked to me like there were some copy/paste errors to the forum post.
    I deleted them and compressed the code a bit more... Hope he doesn't mind.
    Sorry, what do you think the errors were? It works perfectly for me - as per my sig.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,108
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by Philip M View Post
    Sorry, what do you think the errors were? It works perfectly for me - as per my sig.
    The showmore function with the double .innerHTML assignment and the orphaned ;txt; at the end of the line.

    Please note, I did not say it did not work.
    I suggested there were some possible copy/paste errors.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,158
    Thanks
    203
    Thanked 2,548 Times in 2,526 Posts
    Quote Originally Posted by jmrker View Post
    The showmore function with the double .innerHTML assignment and the orphaned ;txt; at the end of the line.

    Please note, I did not say it did not work.
    I suggested there were some possible copy/paste errors.
    Oh, thank you! I never noticed.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Tags for this Thread

    Posting Permissions

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