www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: toggle a link text and show/hide ID onclick

  1. #1
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623

    toggle a link text and show/hide ID onclick

    hi folks.
    I am trying to work out a small issue. I am trying to create a Link that changes its currently displayed text and also toggles the css.display property from inline to hidden. I'm sure there are solution outs there btu I have not been able to find one that does both functions with one click properly and is also easy to implement for people not as familiar with html and javascript.

    Obviously I am trying to create a show more, show less type link.

    currently this often shared code works fine to change the current state of the target ID's css.display from none to inline.

    Code:
     
       function togglevis(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'inline')
              e.style.display = 'none';
           else
              e.style.display = 'inline';
    my current code for the sample page:
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    body {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #666666;
    	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    	padding: 0;
    	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    	color: #000000;
    }
    .hidden {
    	display: none;
    }
    
    .oneColElsCtr #container {
    	width: 46em;
    	background: #FFFFFF;
    	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    	border: 1px solid #000000;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    }
    .oneColElsCtr #mainContent {
    	height: 500px;
    	width: 500px;
    	padding-top: 0;
    	padding-right: 20px;
    	padding-bottom: 0;
    	padding-left: 20px;
    }
    </style>
    </head>
    
    <body class="oneColElsCtr">
    
    <div id="container">
        <div id="mainContent" >
         Here is some sample text. <a href="#" id="short1" onclick="togglevis('long1')">Show More</a>
        <div id="long1" class="hidden">
       
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    	<!-- end #mainContent -->
    	</div>
    	</div>
    <!-- end #container --></div>
    </body>
    </html>

    My end goal is to be able to not only toggle the display of the LONG1 div but to also change the innerhtml of 'short1' from "Show More" to "Show Less"

    I am still learning about JS so Im really rough around the edges. I tried some different techniques btu I dont ahev them posted on my work pc. Ill post an example fo what Ive tried so far when I get home today. hopefully this will at least get across what I am trying to accomplish.

  2. #2
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623

    ...

    I cant find an edit button so Im assuming it's not available yet.

    I forgot to include that I am using the following code in my current html example, in the head tag, but I messed up the 2nd cut and paste.

    Code:
    <script type="text/javascript">
    <!--
        function togglevis(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'inline')
              e.style.display = 'none';
           else
              e.style.display = 'inline';
        }
    //-->
    </script>

  3. #3
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    i do realize that I am trying to alter 2 different target ID's. I am trying to figure out a way to call both changes from one function say something like :

    Code:
    <a href="#" id="short1" onclick=togglevis('long1','short1');">Show More</a>

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    Maybe use this as a template.

    The JS shows/hides the 'more content' and toggles the links' href and innerHTML from 'Show more' to 'Show less'.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>

    <
    style type="text/css">
    <!--
    ul {
    list-
    style-typenone}

    .
    more_content {
    margin10px 0px 0px 50px;
    padding5px 5px 5px 5px;
    width200px;
    height100px;
    border1px solid black;
    overflowauto;
    displaynone}

    -->
    </
    style>

    <
    script type="text/javascript">

    function 
    showMore(link_id,elemId) {
        
    linkObj document.getElementById(link_id);
        
    //display the more content for this elemId
        
    document.getElementById(elemId).style.display='block';
        
    //change the links attributes to hide the more content
        
    linkObj.href 'javascript:hideMore("'+link_id+'","'+elemId+'")';
        
    linkObj.innerHTML "Show less";
    }

    function 
    hideMore(link_id,elemId) {
        
    linkObj document.getElementById(link_id);
        
    //hide the more content for this elemId
        
    document.getElementById(elemId).style.display='none';
        
    //change the links attributes to show the more content
        
    linkObj.href 'javascript:showMore("'+link_id+'","'+elemId+'")';
        
    linkObj.innerHTML "Show more";
    }

    </script>
     
    </head>
    <body>

    <div>
        <ul>
            <li>
               <div>
                   <a id="m1_link" href="javascript:showMore('m1_link','m1_cont')">Show more</a>
                   <div id="m1_cont" class="more_content">More 1 content</div>
               </div>
            </li>
            <li>
               <div>
                   <a id="m2_link" href="javascript:showMore('m2_link','m2_cont')">Show more</a>
                   <div id="m2_cont" class="more_content">More 2 content</div>
               </div>
            </li>
            <li>
               <div>
                   <a id="m3_link" href="javascript:showMore('m3_link','m3_cont')">Show more</a>
                   <div id="m3_cont" class="more_content">More 3 content</div>
               </div>
            </li>
            <li>
                <div>
                   <a id="m4_link" href="javascript:showMore('m4_link','m4_cont')">Show more</a>
                   <div id="m4_cont" class="more_content">More 4 content</div>
               </div>
            </li>
        </ul>
    </div>
     
    </body>
    </html> 
    Last edited by tirna; 04-20-2010 at 03:06 PM.

  5. #5
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623

    .

    Looks promising. I think that is a step in the right direction, thank you.

  6. #6
    Join Date
    Mar 2010
    Posts
    2,803
    no problem hopefully it will help you sort out your code.

  7. #7
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    I tried this but im getting a syntax error on the Else statement:

    Code:
    <script type="text/javascript">
    <!--
        function togglevis(longid,shortid) {
           var e = document.getElementById(longid);
    	   var d = document.getElementById(shortid);
           if(e.style.display == 'none')
              e.style.display = 'inline';
    		  d.innerhtml= "Show Less...";
           else
              e.style.display = 'none';
    		  d.innerhtml= "Show More...";
        }
    //-->
    </script>

  8. #8
    Join Date
    Apr 2010
    Posts
    20
    you're missing the beginning { for the else.

    *edit*
    actually you are missing brackets for the entire if construction.

  9. #9
    Join Date
    Mar 2010
    Posts
    2,803
    you probably need a set of {} for the true and false blocks of code in your IF().

  10. #10
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    doesnt that mean another } should be in there somewhere as well?

    ( forgive me, ive had no formal programming education so syntax gives me a headache still )

  11. #11
    Join Date
    Apr 2010
    Posts
    20
    You need to create a block for your execution if you have more then one statement, this is done with brackets. Indenting only makes the code easier to read, you actually don't need to indent, ever, if you don't want to, but I highly suggest it

    Code:
    <script type="text/javascript">
    <!--
        function togglevis(longid,shortid) {
           var e = document.getElementById(longid);
    	   var d = document.getElementById(shortid);
           if(e.style.display == 'none'){
              e.style.display = 'inline';
              d.innerhtml= "Show Less...";
          }
          else{
              e.style.display = 'none';
    	  d.innerhtml= "Show More...";
          }
      }
    //-->
    </script>

  12. #12
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    that cahnges the hidden display div with the id of "long1" but does not alter the inner html text of "short1" when using onclick=togglevis('long1','short1');

    it does not , however throw an error any longer

  13. #13
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    Im testing with IE8 and Google Chrome btw

  14. #14
    Join Date
    Jan 2009
    Posts
    3,346

  15. #15
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    ]Ok so 4 hours and 3 "smoke breaks" later this is what I came up with.

    I used tirna's exampleand started from there. I then found http://codepunk.hardwar.org.uk/css2js.htm and realized I could control other aspects of the css using the property conversion sheet they have.

    I did it this way shown for several reasons.

    . The site it would be used on controls the main css properties of the div in will display in so I have very little influence on the output that is displayed to the user. That is why I am using :
    Code:
            linkObj.innerHTML = "More..."; 
    	linkObj.style.color = "blue";
    	linkObj.style.textDecoration="none";
    and

    Code:
    linkObj.innerHTML = "Less..."; 
    	linkObj.style.color = "red";
    	linkObj.style.textDecoration="none"
    Which changes the color of the text "Less..." to red. it appears to work in most browsers pretty well so it turned out nicely.

    Oh also I used <span because no matter what I do the text is going to be forced to be within a certain width. If I want the text to start a new line Ill just change <span to <p

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title></title> 
    
    <style type="text/css"> 
    <!-- 
    ul { 
    list-style-type: none} 
    
    .show { 
    overflow: auto; 
    display: none} 
    a {
    	color: blue;
    }
    
    --> 
    </style> 
    
    <script type="text/javascript"> 
    
    function showMore(link_id,elemId) { 
        linkObj = document.getElementById(link_id); 
        //display the more content for this elemId 
        document.getElementById(elemId).style.display='inline'; 
        //change the links attributes to hide the more content 
        linkObj.href = 'javascript:hideMore("'+link_id+'","'+elemId+'")'; 
        linkObj.innerHTML = "Less..."; 
    	linkObj.style.color = "red";
    	linkObj.style.textDecoration="none";
    } 
    
    function hideMore(link_id,elemId) { 
        linkObj = document.getElementById(link_id); 
        //hide the more content for this elemId 
        document.getElementById(elemId).style.display='none'; 
        //change the links attributes to show the more content 
        linkObj.href = 'javascript:showMore("'+link_id+'","'+elemId+'")'; 
        linkObj.innerHTML = "More..."; 
    	linkObj.style.color = "blue";
    	linkObj.style.textDecoration="none";
    } 
    
    </script> 
    
    </head> 
    <body> 
    
    <div> 
       
         
               
                   <a id="msg1" href="javascript:showMore('msg1','1more')">More...</a> 
                   <span id="1more" class="show">More 1 content</span> 
               
         
       
                   <a id="msg2" href="javascript:showMore('msg2','2more')">More...</a> 
                   <span id="2more" class="show">More 2 content</span> 
    
                   <a id="msg3" href="javascript:showMore('msg3','3more')">More...</a> 
                   <span id="3more" class="show">More 3 content</span> 
              
                   <a id="msg4" href="javascript:showMore('msg4','4more')">More...</a> 
                   <span id="4more" class="show">More 4 content</span>
            
          
    </div>
    
    </body> 
    </html>

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