The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> innerHTML show/hide, how to show/hide content from an innerHTML
palmerk
post Jan 9 2015, 01:56 PM
Post #1





Group: Members
Posts: 1
Joined: 9-January 15
Member No.: 22,016
Hello,

I am fairly new to coding, but hopefully I can receive some help on here. I am making a website and am using innerHTML to show text when someone clicks on a word. The address can be found here: http://somecoolroad.com/Ingredients_ep_42.html

The code is below:


<div><span style="font-weight: normal; font-size: 12pt; text-decoration: underline;">
<p onclick="myFunction()">Almond Oil</p>
<p id="almondoilclick"></p>
<script>
function myFunction() {
document.getElementById("almondoilclick").innerHTML="Information about Almond Oil will be written here...."

}
</script>
</span></div><div>


If you click on the first word on the page "Almond Oil," you should see a description. I want to be able to click on that word again and have that description disappear. I do not want to use buttons. I just want people to able to click on the word and have the description appear when they click on one of the ingredients on that page and disappear when they click the word again. Thank you for your help!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 9 2015, 04:18 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
I think a better way would be to use show/hide. Example:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Show or Hide</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.hide
{
    display: none;
}

.show
{
    display: block;
}
</style>
</head>
<body>
<div>
    <p style="font-weight: normal; font-size: 12pt; text-decoration: underline;" onclick="myFunction('almondoilclick')">Almond Oil</p>
    <p id="almondoilclick" class="hide">Information about Almond Oil will be written here....</p>
</div>
<script type="text/javascript">
function myFunction(id)
{
    var obj = document.getElementById(id);
    if(obj.className == 'show')
    {
        obj.className = 'hide';
    }
    else
    {
        obj.className = 'show';
    }
}
</script>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 9 2015, 04:47 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(palmerk @ Jan 9 2015, 07:56 PM) *

am using innerHTML to show text when someone clicks on a word.

I woudn't use innerHTML for that, since that may stop users without javascript and search engines from finding the text (though hiding large amounts of text from search engines might be considered search engine manipulation).

In fact you don't need javascript at all, the following CSS should work in IE9 and other newer browsers (and hopefully default to stay open in older ones):

CODE
<style type="text/css" media="screen">
label {cursor: pointer;}
.toggle {display: none;}
.toggle:not(:checked) ~ span {display: none;}
.toggle:checked ~ span {display: inline;}
</style>

<label>
<input type="checkbox" class="toggle">Almond Oil
<span>Information about Almond Oil will be written here....</span>
</label>

(I hide the checkbox above, but by leaving it visible users may easier understand that they can interact with the text on the page). See also http://css-tricks.com/the-checkbox-hack/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 9 2015, 05:01 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(CharlesEF @ Jan 9 2015, 10:18 PM) *

<p id="almondoilclick" class="hide">

That will make the content inaccessible for users without javascript. It's better to use javascript to initially hide the content too (I posted a script like that myself, but it was buggy so I remove it until it's fixed blush.gif ). Maybe the script works now:

CODE
<style type="text/css" media="screen">
.toggle_section {cursor: pointer;}
.hide {display: none;}
.show {display: block;}
</style>

<p class="toggle_section">Foo
<span>Information about foo will be written here....</span>
</p>

<p class="toggle_section">Bar
<span>Information about bar will be written here....</span>
</p>

<script type="text/javascript">
function toggle_content(x)
{
    if(x=='init')
    {
        var p=document.getElementsByTagName('p');
        for(var i=0; i<p.length; i++)
        {
            if(p[i].className=='toggle_section')
            {
                var span=p[i].getElementsByTagName('span')[0];
                span.className='hide';
                p[i].onclick=function()
                {
                    toggle_content(this);
                }
            }
        }
    }
    else // x is clicked P element
    {
        var span=x.getElementsByTagName('span')[0];
        if(span.className=='hide')
        {
            span.className='show';
        }
        else if(span.className=='show')
        {
            span.className='hide';
        }
    }
}
window.addEventListener('load', function(){toggle_content('init');}, false);
</script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 9 2015, 07:55 PM
Post #5


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
QUOTE(Christian J @ Jan 9 2015, 04:01 PM) *

QUOTE(CharlesEF @ Jan 9 2015, 10:18 PM) *

<p id="almondoilclick" class="hide">

That will make the content inaccessible for users without javascript. It's better to use javascript to initially hide the content too (I posted a script like that myself, but it was buggy so I remove it until it's fixed blush.gif ). Maybe the script works now:

Yes, you are correct. I was in a hurry because I was off to do a job but I 'assumed' the OP knew of the javascript pitfalls. I'll try not to 'assume' anymore.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 10 2015, 07:38 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
Here's a much shorter script than the one I posted above. It's based on CharlesEF's script, but also adds the CLASS "loaded" to e.g. the BODY element (or any other parent of the elements you want to toggle) with javascript. That way the CSS rules will only match when javascript is enabled.

CODE
<style type="text/css" media="screen">
body.loaded .toggle {cursor: pointer;}
body.loaded .hide {display: none;}
body.loaded .show {display: block;}
</style>

</head
<body>

<p class="toggle" onclick="myFunction('almondoilclick')">Almond Oil</p>
<p id="almondoilclick" class="hide">Information about Almond Oil will be written here....</p>

<p class="toggle" onclick="myFunction('linseedoilclick')">Linseed Oil</p>
<p id="linseedoilclick" class="hide">Information about Linseed Oil will be written here....</p>

<script type="text/javascript">
function myFunction(id)
{
    var obj = document.getElementById(id);
    if(obj.className == 'show')
    {
        obj.className = 'hide';
    }
    else
    {
        obj.className = 'show';
    }
}
document.body.className+=' loaded';
</script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 02:48 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC