• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1450
  • Last Modified:

Javascript Rollup

Hi,
I cannot seem to find anything about what I believe are called Javascript Rollup's, meaning a mechanism that usually is initiated with at + or - and opens part of a screen (web page) and/or closes it. Normally used as a mechanism to allow the page user to organise the content on the screen better such that they only see the parts they need.

So for instance I may have a web page divided into say 5 distinct parts and want to allow the user to open and or close each of those five parts individually, similar to how a folder view in explorer would work on a desktop file system.
0
markloessi
Asked:
markloessi
  • 3
  • 3
1 Solution
 
dominik_znidarCommented:
<script type="text/javascript">
function posk(el_id) {
   elem = (ducument.all) ? document.all[el_id] : document.getElementById(el_id);
   elem.style.display = (elem.style.display=="none") ? "block" : "none";
}
</script>

<div id="b1">
   <a href="#" onClick="posk("b1_cont");" id="b1_a">container1</a>
   <div id="b1_cont" style="display: none;">stuff displayed</div>
</div>
0
 
dominik_znidarCommented:
So sory! Error occured!!

<script type="text/javascript">
function posk(el_id) {
   elem = (document.all) ? document.all[el_id] : document.getElementById(el_id);
   elem.style.display = (elem.style.display=="none") ? "block" : "none";
}
</script>
<div id="b1">
   <a href="#" onClick="posk('b1_cont');">container1</a>
   <div id="b1_cont" style="display: none;">stuff displayed</div>
</div>

This should work fine!
0
 
markloessiAuthor Commented:
Very Nice, I've implemented this and I'm having an issue, implemented here:
http://support.faulknertechnologies.com/rollups 
when you click on the open and close you get the content and then the screen refreshes to the root of the portal, how do you stop this. I was not sure if I need to do something with the # specification in the href

Thanks for your help!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
markloessiAuthor Commented:
Secondary question:
Could the <a href ....... > be replaced with some kind of input instead, like a button ?
That would be handy as well
0
 
dominik_znidarCommented:
OK. It's cousing problems :);

To avoid executing links, change the href value from "#" to "javascript:void(0);". This thingy only executes event listeners such as onClick, etc.

Ofcourse you can make this action with almost any html objects like images, buttons, inputs, divs,...
Just include onClick="posk('b1_cont');" in its tag and test it :).

And remeber, if this object is form element such as input or button, remember to add RETURN FALSE to prevent form from submiting:
<button onClick="posk('b1_cont'); return false;">HIDE / CLOSE</button>

Nice page you have there :)
0
 
markloessiAuthor Commented:
Schweet! Excellento!

Thanks for the quick turnaround!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now