|
JavaScript - Collapsible Paragraphs
Does anyone know of an alternative coding for this function that will do the trick in browsers such as firefox?
Code: with (document)
{
write("<STYLE TYPE='text/css'>");
write(".hiddentext {display:none;} .outline {cursor: hand; text-decoration:underline; font-family: Arial; font-size: 13px;}");
write("</STYLE>");
}
function expandIt(whichEl)
{
whichEl.style.display = (whichEl.style.display == "block" ) ? "none" : "block";
}
<img src="images/click.gif" onclick="expandIt(el1); return false">
<div id="el1" class="hiddentext">
...content here...
</div>
Similar TutorialsHello This is brilliant and good to work with, there is one issue i have if someone can help please. I have used example 4 bacuase it visually does exactly what i need, however there is one little problem i cant solve. I copied the div and now have 2 collapsible divs next to each other, which nearly do exactly what i need. I have lined up the 2 divs next to each other they both open, but the one on the left pushes the right one out to the right and i don't know how to do that. here is the code thanks the animatedcollapse.js is too long to put but can be found here http://www.dynamicdrive.com/dynamici...edcollapse.htm Code: <script type="text/javascript">
animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
animatedcollapse.ontoggle = function ($, divobj, state) { //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>
<div id="mobile_navigation">
<div id="sectionnav">
<a href="#" rel="toggle[dog]" data-openimage="section_active.gif" data-closedimage="section.gif"><img src="collapse.jpg" border="0" /></a>
<div id="dog">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>
</div>
<div id="searchnav">
<a href="#" rel="toggle[cat]" data-openimage="search_active.gif" data-closedimage="search.gif"><img src="collapse.jpg" border="0" /></a>
<div id="cat">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>
</div>
</div>
Could someone be kind enough to provide me with code to make a collapsible menu? What I'm looking for is a vertical menu, that will open up the sub-categories upon a mouseover. Clicking on the menu item will bring them to the specific page. Oh, and this might not matter, but I'd prefer if I was able to style the menu to fit with my site theme. Thanks.
Hello, I created a page which has 12 collapsible panels, each can be opened and closed independently but i would like to have one button on the page that expands all the content, for printability. Below is the section of javascript that relates to the original state of the collapsible panel. When I change the this.contentIsOpen to be true all the panels expand. I would like a way of linking this function to a button. Code: Spry.Widget.CollapsiblePanel.prototype.init = function(element)
{
this.element = this.getElement(element);
this.focusElement = null;
this.hoverClass = "CollapsiblePanelTabHover";
this.openClass = "CollapsiblePanelOpen";
this.closedClass = "CollapsiblePanelClosed";
this.focusedClass = "CollapsiblePanelFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.animator = null;
this.hasFocus = false;
this.contentIsOpen = false;
};
Many thanks Liam Hello, trying to cooperate with Spry atm, and its going fairly ok.. Its just one thing, i would like it when you open one spry panel, the rest of them would close. Anyone know how to do that? Thanks Hi. I haven't used much Javascript before and I have a question about the following code. I've taken it from this tut and changed it a bit so it applies an expand/collapse functionality to a floating sidebar on the side of a website I'm working on. When I remove the background on the toggle function, it refuses to come back. I have a feeling it's a simple solution, I just don't know what syntax to fill into the second part of the conditional to restore the background image. I've tried display, show, an actual path to the image... Code: <script language="JavaScript" type="text/javascript">
function toggle() {
var bar = document.getElementById('floater');
var barText = document.getElementById('f_news');
if (bar.style.width == '210px') {
bar.style.width = '40px';
bar.style.backgroundImage = 'none';
barText.style.display = 'none';
} else {
bar.style.width = '210px';
bar.style.backgroundImage = 'HELP!';
barText.style.display = 'block';
}
}
</script>
Thanks in advance. Is there a way of doing this with javascript? I have a homepage, that has to go to a certain directory, find the newer TXT file, get the first paragraph, get it formated with H1 tag, then read the rest format it with a P tag. So everytime a new TXT file is created in that directory the homepage (HTML/index.html) change. Thank in advance Miguel Sanchez Is there a way of doing this with java script? I have a homepage, that has to go to a certain directory, find the newer TXT file, get the first paragraph, get it formated with H1 tag, then read the rest format it with a P tag. So everytime a new TXT file is created in that directory the homepage (HTML/index.html) change. Thank in advance Miguel Sanchez I just wrote an essay to discover it had logged me out and I lost everything. Grrrrrrr. Here goes again, simplified this time. I've got a sticky footer at the bottom of the page and a spry collapsible panel which expands to reveal content on mouse over. The problem I'm facing is that the page doesn't scroll down with it, only the scroll bar gets larger to accommodate for a manual scroll down. This is kind of useless because the user might not even realise that there's extra content there in the first place if it's not automatic. My question is, what's the best javascript code to use to automatically scroll the page down when the spry tab is opened and where would I insert it? I've tried all morning with no success so far! Thanks, Nick, I'm copy pasting this post this time round, I don't trust this website now |
|||||||