?
Solved

Hide Show display div in Firefox as well as IE6

Posted on 2005-03-16
12
Medium Priority
?
957 Views
Last Modified: 2008-01-16
Hi.

I am trying to change one or two lines that will allow for a collapsing display (hide or show a div) in IE6 as well as Firefox.  This routine works just fine in IE6 but does not work in Firefox.  

I think this is an easy fix but can't quite figure it out.
<head>

function expandIt(whichEl) {
      
      if (navigator.appName=='Microsoft Internet Explorer') {
            whichEl.style.display=(whichEl.style.display=="block" ) ? "none" : "block";
            }
      else whichEl.style.display=(whichEl.style.display=="block" ) ? "none" : "block";  // this is the line that needs to be changed.
      }
</head>      

<body>
 <h4 style="cursor: pointer; cursor: hand;" onClick="expandIt(<?php echo $hideme ?>)">   the $hideme is simply a call to a known  MySQL database paragraph of text.

Actually, the routine I am using is even simpler but only allows for IE6.   It is simply

  whichEl.style.display=(whichEl.style.display=="block" ) ? "none" : "block";

thanks

0
Comment
Question by:bodywise
[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
  • 6
  • 4
  • 2
12 Comments
 
LVL 31

Accepted Solution

by:
GwynforWeb earned 300 total points
ID: 13562328
<script>
function expandIt(whichDiv) {  
      whichDiv.style.display=(whichDiv.style.display=="block" ) ? "none" : "block";  
 }
</script>

<input type="button" value="show/hide" onclick=" expandIt(document.getElementById('theDiv'))">
<div id="theDiv" style="display:'none'">
  <p>This is the div content </p>
</div>
0
 

Author Comment

by:bodywise
ID: 13562498
Appreciated.   Clever solution.   But it does not work.  I need to show you a page and what this looks like.  It is a esries of books with upwards of 10-30 books on a page.  I don't really want a button and I think a button won't work with multiple selections such as this.   View this in IE6 first to see that it works, then in Firefox or whatever Mozilla based to see it does not work.

Maybe I missed something.

http://www.antiaging.com/bookstores/bookstore_antiaging_alphabetical.php

thanks ...
0
 

Author Comment

by:bodywise
ID: 13562520
On second glance.  I omitted the quotes in 'theDiv' as you had, which is really

onclick= "expandIt(document.getElementById('<?php echo $hideme ?>'))"    I thought the quotes would turn this into a literal string.  Wrong.  It does as you suggested.  So ... it works.  Any way of  doing this as easily without a button?

many thanks for a quick solution.

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 15

Expert Comment

by:SnowFlake
ID: 13563051
you can try useing a standard containmemnt hirarchy
where the expand/colappse control is the first child and the actual content is the second child
of some common parent node.

I hope this will also work for firefox but I have not tested it.
If it does not you might need to change the script to a function that gets "el" as a parameter and add
the onclick event handled to each of the "expandcollapse" elements , in which case you can remove thair ID's.

SnowFlake


<head>
<style>
#expandcollapse { cursor:hand }
</style>
<script for="expandcollapse" event="onclick()">
      var el=event.srcElement;
      var el2=el.parentElement.children[1];
      if (el.innerText=='-') {
            el.innerText='+';
            el2.style.display="none";
      }
      else {
            el.innerText='-';
            el2.style.display="inline";
      }
      
</script>
</head>
<body>
<span><span id="expandcollapse">-</span><span>Some item</span></span><br>
<span><span id="expandcollapse">-</span><span>additional Item</span></span><br>
<span><span id="expandcollapse">-</span><span><span>An Item<br>
&nbsp;&nbsp;&nbsp;<span><span id="expandcollapse">-</span><span>With a nested item inside</span></span></span><br></span></span><br>
<span><span id="expandcollapse">-</span><span>One Last Item</span></span><br>
</body>
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 13566914
the code I posted works in all browsers and  is the standard syntax for showing/hiding a div. I  used a button to illustrate the syntax, I was NOT suggesting that you should use a button to solve you problem but since I have no more details of what you are doing that  is how I demonstrated the syntax.
0
 

Author Comment

by:bodywise
ID: 13567957
GwynforWeb,

Thank you.  I see you are one of the stars.  It also means you are working volume, so the parseness of your suggestions is noted.  I grant that you did solve the problem in the simplest and most elegant fashion.   I need to tweak further.

with gratitude,
bodywise

0
 

Author Comment

by:bodywise
ID: 13568004
Snowflake,

Your example is appreciated but is far more complex.  It may work and would require more of my time.  I am always looking for just a simple tweak to make my own routines work.    In saying you are not sure if it works in Firefox, that was the starting point for this query.  

I am intrigued by the entirely different nature of your solution, although parent and child nodes always seem even more complex to me.  

Your time is quite appreciated.

with regards,
bodywise

0
 
LVL 15

Expert Comment

by:SnowFlake
ID: 13568134
The reason I use the model I showed you here is that when you have many collapsable elements on the same page (e.g. when you have a tree) the code tends to be much more compact this way.

you have a single place where you handle the collapse expand code.
and it is hooked via the <script for="..." event="onclick()">

the parent and child nodes are used to identify the item that need to be collapsed in a consistant way.

As for firefox, I was aware of the fact that it was part of the Q and therfore though it neccery to mention that I don't know it it will work.

0
 

Author Comment

by:bodywise
ID: 13568265
SnowFlake,

Thank you again for your time and suggestions.  I will try this as an alternative.

The <script for="..." event="onclick()"> is a new convention for me.  Clever ...

with warm regards,
bodywise

0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 13571599
bodywise,
   Thx for the points.  Looking at your page again I see it is generated by php so the div names in the function call are not an inconvenience for the code.  Using a child/parent node solution is not needed here and also can be a sensitive to page editing later on. You could also use a link instead of the button like so and is less dominant in the page layout

<a href="#" onclick="expandIt(document.getElementById('hideme0517704609221'));return false">show/hide full text</a>
0
 

Author Comment

by:bodywise
ID: 13574774
GwynforWeb,

Almost right on.  That is what I was looking for.  Turns out the most critical change you added was the simple
document.getElementById.  That is what I needed.  One simple change.

So the final form for my own taste uses a CSS heading including a notation for a pointer that works in both IE6 and Firefox (because they are  ... different).

<H4 STYLE="cursor: pointer; cursor: hand;" onclick="expandIt(document.getElementById('<?php echo $hideme ?>'));return false">... click here to see or hide full book description</H4>

Again, the quotations surrounding the php call were critical.   BTW, I am still not sure what the return false statement does.

Many many thanks for the wrap-up.  Now I would have upgraded to an 'A'

bodywise
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 13578086
return false stops the link from from trying to change the page URL, ie just call the function and do nothing when clicked
0

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

762 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