I'm trying to get the collapse/expand text to work, everything is nice, but there are spaces between menus, I was wondering if anyone can help, and if this is not the right section since it's not directly related to coffee cup, maybe someone can guide me in the right direction. Here is the code: (I suspect the header h4 ( createDocumentStructure('h4');
) is what naturally has space attached, but to what could I change it to?
SCRIPT:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Fri, 30 Jan 2015 04:04:03 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
var collapseDivs, collapseLinks;
function createDocumentStructure (tagName) {
if (document.getElementsByTagName) {
var elements = document.getElementsByTagName(tagName);
collapseDivs = new Array(elements.length);
collapseLinks = new Array(elements.length);
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var siblingContainer;
if (document.createElement &&
(siblingContainer = document.createElement('div')) &&
siblingContainer.style)
{
var nextSibling = element.nextSibling;
element.parentNode.insertBefore(siblingContainer, nextSibling);
var nextElement = elements[i + 1];
while (nextSibling != nextElement && nextSibling != null) {
var toMove = nextSibling;
nextSibling = nextSibling.nextSibling;
siblingContainer.appendChild(toMove);
}
siblingContainer.style.display = 'none';
collapseDivs[i] = siblingContainer;
createCollapseLink(element, siblingContainer, i);
}
else {
// no dynamic creation of elements possible
return;
}
}
createCollapseExpandAll(elements[0]);
}
}
function createCollapseLink (element, siblingContainer, index) {
var span;
if (document.createElement && (span = document.createElement('span'))) {
span.appendChild(document.createTextNode(String.fromCharCode(160)));
var link = document.createElement('a');
link.collapseDiv = siblingContainer;
link.href = '#';
link.appendChild(document.createTextNode('expand'));
link.onclick = collapseExpandLink;
collapseLinks[index] = link;
span.appendChild(link);
element.appendChild(span);
}
}
function collapseExpandLink (evt) {
if (this.collapseDiv.style.display == '') {
this.parentNode.parentNode.nextSibling.style.display = 'none';
this.firstChild.nodeValue = 'expand';
}
else {
this.parentNode.parentNode.nextSibling.style.display = '';
this.firstChild.nodeValue = 'collapse';
}
if (evt && evt.preventDefault) {
evt.preventDefault();
}
return false;
}
function createCollapseExpandAll (firstElement) {
var div;
if (document.createElement && (div = document.createElement('div'))) {
var link = document.createElement('a');
link.href = '#';
link.appendChild(document.createTextNode('expand all'));
link.onclick = expandAll;
div.appendChild(link);
div.appendChild(document.createTextNode(' '));
link = document.createElement('a');
link.href = '#';
link.appendChild(document.createTextNode('collapse all'));
link.onclick = collapseAll;
div.appendChild(link);
firstElement.parentNode.insertBefore(div, firstElement);
}
}
function expandAll (evt) {
for (var i = 0; i < collapseDivs.length; i++) {
collapseDivs[i].style.display = '';
collapseLinks[i].firstChild.nodeValue = 'collapse';
}
if (evt && evt.preventDefault) {
evt.preventDefault();
}
return false;
}
function collapseAll (evt) {
for (var i = 0; i < collapseDivs.length; i++) {
collapseDivs[i].style.display = 'none';
collapseLinks[i].firstChild.nodeValue = 'expand';
}
if (evt && evt.preventDefault) {
evt.preventDefault();
}
return false;
}
</script>
<script type="text/javascript">
window.onload = function (evt) {
createDocumentStructure('h4');
}
</script>
<span style="font-family: Verdana; font-weight: normal; font-style: text-decoration: none; font-size: 12pt;">
</head>
<body>
<h4>MENU 1</h4>BLAH BLAH
<h4>MENU 2</h4>IT WORKS!!
<h4>MENU 3</h4>NICE!
<h4>MENU 4</h4>BLAH BLAH
<h4>MENU 5</h4>BLAH BLAH
<h4>MENU 6</h4>BLAH BLAH
<h4>MENU 7</h4>BLAH BLAH
</body>
</html>
how to take out breaks/spaces in the...
rytis abrutis
Registered User
10 posts
rytis abrutis
Registered User
10 posts
never mind I got it, just replaced h4 with li
Inger
Senior Advisor
14,454 posts
You could also have styled the h4 with top and bottom margin set to 0px.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
