Expand and Collapse headers through Javascript

JavaScript
1

As a result of a previous thread, I started some programming with Javascript.
I’d like to use it to expand/collapse some headers in a page.
I made following code to do this.:

That works perfect!
But I want to add something, and I have some problems with that. As I have e.g. 4 headers, I want to expand the text (in <p>-tag) by clicking on header 1. When I click on header 2, I want to collapse text of header 1 and expand header 2 text.
And so on.
That way, I get the height of the site relatively small without needing to scroll.
I don’t quite know how to implement this function into my JS-code!
And if it could be implemented in my .js file, how do I link that in my html, because now I have in every header the same line:
<a href=“#first” onClick=“shoh(‘first’);”>, <a href=“#second” onClick=“shoh(‘first’);”>, etc…

Maybe an extra question: How can I get the content of header 1 be seen as soon as the screen pops up. So you don’t have to click on Header1 before you can see it? And then go on from there: clicking on header2 makes text of header 1 disappear and expands text from header 2, and so on…

Thanks for the help!!
Kind regards
Maxx-iT

2

maybe something like the javascript\jquery accordian

perhaps this helps:

<html>
<head>
<title>Untitled Page</title>
<script type=“text/javascript”>
function slideopen(me_id)
{
var me_obj = document.getElementById(me_id);
var me_height = parseInt(me_obj.style.height);
me_height = me_height + 5;
me_obj.style.height = me_height + “px”;

if(me_height >= 400)
{
busy_sliding = false;
clearInterval(timer_id_open);
}
}
function slideclosed(me_id)
{
var me_obj = document.getElementById(me_id);
var me_height = parseInt(me_obj.style.height);
me_height = me_height - 5;
me_obj.style.height = me_height + “px”;

if(me_height <= 40)
{
busy_sliding = false;
clearInterval(timer_id_close);
}
}
var busy_sliding = false;
var timer_id_open;
var timer_id_close;
function start_slide(me_id)
{
var me_obj = document.getElementById(me_id);
var me_height = parseInt(me_obj.style.height);

if(busy_sliding == false)
{
slide_everyone_else(me_id);
if(me_height == 40)
{
busy_sliding = true;
timer_id_open = self.setInterval(“slideopen('” + me_id + “')”, 10);
}
else
{
busy_sliding = true;
timer_id_close = self.setInterval(“slideclosed('” + me_id + “')”, 10);
}
}
}
function slide_everyone_else(me_id)
{
var me_obj = document.getElementById(me_id);
var me_height = parseInt(me_obj.style.height);
var me_top = parseInt(me_obj.style.top);

var div_elems=document.getElementsByTagName(“div”);

for(var i = 0; i < div_elems.length; i++)
{
var tempstr = div_elems[i].id;
if(tempstr.search(‘_’) == -1)
{
if((div_elems[i].id != me_id)&&(div_elems[i].id != “”))
{
var obj = document.getElementById(tempstr);
var height = parseInt(obj.style.height);
var top = parseInt(obj.style.top);

if(height == 400)
{
//alert(div_elems[i].id);
timer_id_close = self.setInterval(“slideclosed('” + tempstr + “')”, 10);
}
}
}
}
}

</script>
</head>
<body>
<form id=“form1” runat=“server”>
<div id=“DIV1” style=“overflow:hidden; border: 1pt solid black; width:400px; height: 40px; background-color:Yellow; position: relative;” onclick=“start_slide(this.id);”>
<div id=“DIV1_title” style=“top:0px; left:0px;”>
<font size=“6” >Heading 1</font>
</div>
<div id=“DIV1_content”>
lakab balbjalkjsf a oifasdfklj asdkf lakab bal lakab balbjalkjsf a oifasdfklj asdkf lakab bal lakab balbjalkjsf a oifasdfklj asdkf lakab bal
</div>
</div>
<div id=“DIV2” style=“overflow:hidden; border: 1pt solid black; width:400px; height: 40px; background-color:Orange; position: relative;” onclick=“start_slide(this.id);”>
<div id=“DIV2_title” style=“top:0px; left:0px;”>
<font size=“6”>Heading 2</font>
</div>
<div id=“DIV2_content”>
lakab balbjalkjsf a oifasdfklj asdkf lakab balbjalkjsf a oifasdfklj asdkfasdof asdof lakab balbjalkjsf a oifasdfklj asdkfasdof
</div>
</div>
<div id=“DIV3” style=“overflow:hidden; border: 1pt solid black; width:400px; height: 40px; background-color:Red; position: relative;” onclick=“start_slide(this.id);”>
<div id=“DIV3_title” style=“top:0px; left:0px;”>
<font size=“6”>Heading 3</font>
</div>
<div id=“DIV3_content”>
blakab balbjalkjsf a oifasdfklj asdkfas lakab balbjalkjsf a oifasdfklj asdkf lakab bal lakab balbjalkjsf a oifasdfklj asdkf lakab bal dof
</div>
</div>
</form>
</body>
</html>

3

Thanks for the answer, but actually that won’t work so good, since I work within a table.
my <h3>-tag is the header, which needs to be clicked, and the <p>- tag is the content that should collapse/expand.
So I can’t really give a height to those two tags…
But I sure did like the idea.
I’m a bit worried about my layout in the table and overall, if I put divs in it to make it work like your idea…
Maybe something easier for code, based on yours, without having to change the whole layout? So WITH using h3 and p tags?

Thanks!
Maxx-iT

4

Anybody 's got another solution please?
Ulricht, I gave it a try with your entire code, and gave CSS layout lines to the DIV1_title,… and DIV1_content,… corresponding to my h3 and p-tags…
It works fine in Firefox and also layout is correct but it doesn’t expand in IE. The headers (DIV_titles) appear in the right layout, but clicking on them gives no result… Fix for IE maybe?
Does anyone happen to know the reason for this?

Kind regards and thanks!
Maxx-iT

5

Hi Maxx-iT

I coded that piece of code in IE 9

just make sure you are parsing integers and then when assigning the new value to the width, height, left, top ,etc attributes to concatenate the ‘px’

i found that this is sometimes what casues an error

example:
var me_height =[COLOR=“#00FFFF”] parseInt/COLOR;
me_height = me_height - 5;
me_obj.style.height = me_height + “px”;

6

also could you maybe post the new code you created so that we can have a look and see if we can fix it…

7

also can you provide the IE javascript error if there is one

8

My mistake!!! Works fine on IE aswell, just linked wrong!!
Works as it should be :-)!! Saves me tons of pages on my site!!

Thanks a lot!!
Maxx-iT

9

Just encountered a new problem, not JS related or so, but maybe this is a quick fix, otherwise I’ll post a new thread!

When i make my screen smaller, on IE, my site looks like it should be on half the screen, just some scrolling needed to be done, on firefox I’m getting an oversized header, and my content with the table with photo and text in it, is floating somewhere in the topleftcorner…
I think it could have something to do with the position relative or so, to make the JS code to work?
Or what can it be?
in attachment you can find the code of one of the pages with also the CSS from it!

10

sure thing,. glad it could help you. will look at the attachments once they have been approved and will get back to you. :slight_smile:

11

this method set_Position : sets the divs’ position and size according to the browser window size
maybe this will/could help with:

When i make my screen smaller, on IE, my site looks like it should be on half the screen, just some scrolling needed to be done.

code:

<html>
<head runat=“server”>
<title>Untitled Page</title>
<script type=“text/javascript”>

    function set_Position() {
        var obj = document.getElementById('aaDIV');
        var obj_width = parseInt(obj.style.width);
        var obj_height = parseInt(obj.style.height);
        var obj_top = parseInt(obj.style.top);
        var obj_left = parseInt(obj.style.left);
        var obj_right = obj_left + obj_width;
        var obj_bottom = obj_top + obj_height;



        var winW = 630, winH = 460;
        if (document.body && document.body.offsetWidth) {
            winW = document.body.offsetWidth;
            winH = document.body.offsetHeight;
        }
        if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) {
            winW = document.documentElement.offsetWidth;
            winH = document.documentElement.offsetHeight;
        }
        if (window.innerWidth && window.innerHeight) {
            winW = window.innerWidth;
            winH = window.innerHeight;
        }


        var page_height = winH;
        var page_width = winW;
        obj.style.width = (page_width - 20) + 'px';
        //obj.style.height = page_height + 'px';
        
        obj.style.top = ((page_height - 5) - obj_height) + 'px';
        obj.style.left = 0;//((page_width / 2) - (obj_width / 2)) + 'px';
        
    } //end function set_Position()
    
    window.onresize = function(){set_Position();};
    
&lt;/script&gt;

</head>
<body onload=“set_Position();”>
<form id=“form1”>
<div id=“aaDIV” style=“border: 1pt solid black; width:200px; height: 30px; background-color:Orange; position: absolute; top:0px; left: 200px;”></div>
</form>
</body>
</html>

12

It works on IE, still can’t get the Firefox screen to work, in attachment three printscreens: how it should be full screen, the smaller screen and correct version of IE, and the wrong one from Firefox!

13

will be able to assist more, when i can test it in ff & chrome… my work pc doesnt have them installed, so i’ll check it out when i get back home… :slight_smile:

14

Thanks!! Have a nice day at work till then !!!

15

I’m having also a bit of problems with the previous code, working with the height in IE. My height shouldn’t be more the 450, because there is a photo (as on the printscreens) next to the text that needs to be collapsed/expanded. That photo is on each page 450px high.
I’m having quite some text, but if I put the expanded text into font-size 14px, I just got it to the height from the photo. However, the same amount of text cannot be displayed on IE, because apparently they show text a bit larger then Firefox.
Is there a line of code that I can put into the css that adapts the size of the content-tag when it reaches Internet Explorer?
OR MAYBE EVEN BETTER:
Is it possible to make the div that has too much text to get on 450px height, have the option to scroll? So that only the text that isn’t displayed because of the heightrestriction can be read through scrolling?

Thanks again!

Kind regards
Maxx-iT

16

this will help with the scrolling => overflow:scroll;

<html>
<head>
<title>
</title>
</head>
<body>
<div id=‘aDiv’ style=‘width:300px;height:450px;overflow:scroll;position:relative’>
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
asdfkjasdlk fasdklfj as;dlfjasdkl fasdklfjasdlkfja sd;lfjas;dlk fj;asdlkf ;lasjf asdkfjahsdlfjkhasdlkjfhas lkdfhasdk
</div>
</body>
</html>

17

Is there a line of code that I can put into the css that adapts the size of the content-tag when it reaches Internet Explorer?

and if you set the font size/family with either css or js? does ie still display the font differently?

18

This indeed helps! However, the vertical scrolling is fine, BUT now, he places also a horizontal scroll bar, which is obviously not the intention. Plus, this has also the disadvantage that the height of the DIV1_title becomes higher because of the horizontal scroll bar.
So any suggestions to get rid of the horizontal? I put an prtscrn to show you.

Concerning the IE font problem, I use normally CSS, as I am not used on doing layout with js… So any tips on how to set the font-size through js? If I put the line for IE into js, does that mean I can delete the css-line. In other words would they interfere with eachother?

Thanks, we’re nearly there :-)!

Kind regards
Maxx-iT

19

However, the vertical scrolling is fine, BUT now, he places also a horizontal scroll bar, which is obviously not the intention.

use overflow-y:scroll; for only vertical scrollbar

20

If I put the line for IE into js, does that mean I can delete the css-line.

if you did the styling with js you could remove that css…

In other words would they interfere with eachother?

i would imagine so yes, if the css yes one thing and the js says something else then i guess which ever runs last would have precedence over the other.