Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Show/Hide not working

Posted on 2013-05-31
15
Medium Priority
?
512 Views
Last Modified: 2013-05-31
I have tried to place a FAQ show/hide function on my webpage.  It works in Dreamweaver, but not when I load it on the server.  See it at http://www.garblecard.com/GC-Full.html


Here is the code:

 <section id="styles" class="clearfix">

            <h1>FAQs</h1>

            <div class="primary">

                <p class="intro">Frequently Asked Questions:</p>
                      <span id="show1" class="show"><a href="#" onClick="toggle_visibility('readthis1');">
                      <h2>Will GarbleCard mess up my credit cards?</h2></a></span><span id="readthis1" class="hide"> No. Garblecard emits no signals, emissions or transmissions.<br /></span>
               
                <span id="show2" class="show"><a href="#" onClick="toggle_visibility('readthis2');"><h2>Where should I keep the GarbleCard?</h2></a></span><span id="readthis2" class="hide"> For best results, sandwich credit and debit cards between two GarbleCards.<br /></span>

                        <span id="show3" class="show"><a href="#" onClick="toggle_visibility('readthis3');"><h2>Will GarbleCard deactivate a motel key card?</h2></a></span><span id="readthis3" class="hide"> No. Garblecard emits no signals, emissions or transmissions.  Electronic hotel keys are one of many cards that GarbleCard protects<br /></span>
               
                 
            </div>

            <aside>

                    <h2>FAQ List</h2>

                    <p>If you do not find your question, please send it along to us so we can get you the answer and add the question to our list. </p> <a href="#contact"><Strong>Ask Us.</Strong></a></p>

                    <!--<h2>Link List</h2>

                    <ul class="link-list">
                        <li><a href="#">Maecenas eu neque</a></li>
                        <li><a href="#">Dolor eget libero</a></li>
                        <li><a href="#">Lorem Ipsum</a></li>
                        <li><a href="#">Gravida fermentum urna</a></li>
                    </ul>

                    <h2>Testimonials</h2>

                    <div class="testimonials">
                        <blockquote>
                            <p>Donec sed odio dui. Nulla vitae elit libero, a pharetra augue.
                            Nullam id dolor id nibh ultricies vehicula ut id elit. </p>

                            <cite>&mdash; John Doe, XYZ Company</cite>
                        </blockquote>
                        <blockquote>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Cras mattis
                            consectetur purus sit amet fermentum.</p>

                            <cite>&mdash; Jane Roe, ABC Corp</cite>
                        </blockquote>
                    </div>-->

            </aside>

            <a class="back-to-top" href="#main">Back to Top</a>

      </section>
0
Comment
Question by:akbiro
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
15 Comments
 
LVL 11

Expert Comment

by:John Easton
ID: 39210368
I'm not sure if this is the cause, but your code read 'onClick', however it should be 'onclikc' i.e. without the capital C.  While some browsers will allow this other will not and it could be the cause.
0
 

Author Comment

by:akbiro
ID: 39210388
Thank you.  I made the change and it still does not work.  Any other ideas?
0
 
LVL 11

Expert Comment

by:John Easton
ID: 39210397
Reading a bit further I have noticed a couple of issues in the HEAD of the page code.  Firstly your toggle_visibility function isn't contained in <script> tags and the IF statements should have {} around the code as follows:
 function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.className == 'show') 
       	{
          e.className = 'hide';
        }
       else
       	{
          e.className = 'show';
        }
    } 

Open in new window


In my test page it works on the first line only, so I am still looking...
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:akbiro
ID: 39210410
Wow...well that made the Show/Hide work in Dreamweaver, but not when I load it on the server.
0
 
LVL 11

Expert Comment

by:John Easton
ID: 39210422
Ok, I think I have made some progress.  Firstly, there are two functions with the same name 'toggle_vidibility'.  Firstly, delete the one in the HEAD section.  This will undo the change I suggested above.

Now you will only have one function with this name about 10 lines below your <body> tag.  Replace that with the following:
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(document.defaultView.getComputedStyle(document.getElementById(id), '').getPropertyValue("display")!= "none")
       {
          e.style.display = "none";
       }
       else
       {
          e.style.display = "block";
       }
       return false;
    }
//-->
</script>

Open in new window


This works for me on my test page, so hopefully it will work for you too.
0
 
LVL 11

Expert Comment

by:John Easton
ID: 39210434
Oh, one last change (I hope).  From the above remove the "return false" line, it isn't doing anything.

If you have the same issue I do - that when clicking the link the page jumps back to the top - then change each of your functions calls from:
<a href="#" onclick="toggle_visibility('readthis1');">

Open in new window

to
<a href="#" onclick="toggle_visibility('readthis1');return false;">

Open in new window


I.e. just add the "return false;" text after the call to the function.
0
 

Author Comment

by:akbiro
ID: 39210461
Almost...when I load it on the server, clear my cache and run the page, all the questions come up with the answers displayed.  If I click on the questions I can show and hide them.  I want them hidden until the question is clicked.  Thanks
0
 
LVL 11

Expert Comment

by:John Easton
ID: 39210483
You can either add the below into your current page:
<style>
.hide
{
	display:none;
}
</style>

Open in new window

Or update your stylesheet with the same.
0
 

Author Comment

by:akbiro
ID: 39210497
Thanks for your patience.  I changed style.css and it still is not working...thanks
0
 

Author Comment

by:akbiro
ID: 39210499
It works PERFECTLY in Dreamweaver.
0
 
LVL 11

Expert Comment

by:John Easton
ID: 39210543
That threw me for a moment.  Your CSS has a section which starts '@media screen', if you move the properties you have added above this line it should work fine.
0
 

Author Comment

by:akbiro
ID: 39210579
How cool are you.  PERFECT.  I am working on another section over the weekend...I want to replace the Image functions in Featured Works section to use video in the thumbnails with three funtions:

1)  Show a thumb nail image
2)  Roll over it and see a thumb nail video presentation
3)  Click on it and get the larger sized video presentation.

So far, I have gotten no where on this.  If you see me on EE, please jump in and help.  

THANKS again for this assistance.
0
 

Author Comment

by:akbiro
ID: 39210597
I've requested that this question be closed as follows:

Accepted answer: 0 points for akbiro's comment #a39210579

for the following reason:

Excellent and with patience.  Appreciate the help...could not have found it myself.
0
 
LVL 11

Accepted Solution

by:
John Easton earned 2000 total points
ID: 39210598
I think the user has selected the wrong comment to awards points to.  They have selected their own comment, although the text suggest they were happy with the responce!

To akbiro:  Glad I could help!
0
 

Author Closing Comment

by:akbiro
ID: 39210615
Oops,...thank you for doing a great job.  Thanks for your patience with me.  I would never have solved this on my own!!!
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

718 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question