Morning Everyone,
I am working in the standard wiki module provided by dnn. I would like to add an accordion element to a wiki page however I am having a dandy of a time getting it to work. It seems that the javascript and reference get deleted whenever I save the page. The example that I am trying is extremely simple and works when I save the code as an html file and run it in the browser.
So, is there a way I can get dnn to let me use javascript on the page?
Or, is there an inbuilt accordion feature I am just missing that I can use and modify with css?
...hhmm, code tags don't work here. First forum I have ever been to where coding is discussed but no code tags to wrap it in....
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
</head>
<body>
<div id="mainaccordion">
<div class="acc-title">Position Descriptions</div>
<div class="acc-content">
<div id="sub1_accordion">
<div class="sub1_acc-title">Position1</div>
<div class="sub1_acc-content">
<b>Location:</b> USA <br>
<b>Schedule:</b> Full-time <br><br>
<b>Position Description:</b><br>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul><br>
<b>Requirements:</b><br>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul><br><br>
</div>
<div class="sub1_acc-title">Position2</div>
<div class="sub1_acc-content">
<b>Location:</b> USA <br>
<b>Schedule:</b> Full-time <br><br>
<b>Position Description:</b><br>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul><br>
<b>Requirements:</b><br>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul><br><br>
</div>
</div>
</div>
<div class="acc-title">teaser 2</div>
<div class="acc-content">
<table>
<tr><th>header 1</th><th>header 2</th></tr>
<tr><td>stuffy stuff</td><td>other stuff</td></tr>
</table>
</div>
</div>
</body>
<style type="text/css">
/*----- Accordion -----*/
.mainaccordion, .mainaccordion * {
box-sizing:border-box;
}
.sub1_accordion, .sub1_accordion * {
box-sizing:border-box;
}
.mainaccordion {
overflow:hidden;
box-shadow:0px 1px 3px rgba(0,0,0,0.25);
border-radius:3px;
background:#f7f7f7;
}
.sub1_accordion {
overflow:hidden;
box-shadow:0px 1px 3px rgba(0,0,0,0.25);
border-radius:3px;
background:#f7f7f7;
}
/*----- Section Titles -----*/
.acc-title {
width:100%;
padding:15px;
display:inline-block;
border-bottom:1px solid #1a1a1a;
background:#333;
transition:all linear 0.15s;
/* Type */
font-size:1.200em;
text-shadow:0px 1px 0px #1a1a1a;
color:#fff;
box-sizing:border-box;
}
.acc-title.active, .acc-title:hover {
background:#4c4c4c;
/* Type */
text-decoration:none;
}
.sub1_acc-title {
width:50%;
padding:10px;
display:inline-block;
border-bottom:1px solid #1a1a1a;
background:#333;
transition:all linear 0.15s;
/* Type */
font-size:1.00em;
text-shadow:0px 1px 0px #1a1a1a;
color:#fff;
box-sizing:border-box;
}
.sub1_acc-title.active, .sub1_acc-title:hover {
background:#4c4c4c;
/* Type */
text-decoration:none;
}
/*----- Section Content -----*/
.acc-content {
padding:15px;
display:none;
box-sizing:border-box;
}
.sub1_acc-content {
/*--- match title width % ---*/
width:50%;
padding:15px;
display:none;
box-sizing:border-box;
}
</style>
<script>
$(function() {
$('#mainaccordion').accordion({
header: '.acc-title',
event: 'click',
collapsible: true,
heightStyle: 'content',
active: false,
fillSpace: true
});
$('#sub1_accordion').accordion({
header: '.sub1_acc-title',
event: 'click',
collapsible: true,
heightStyle: 'content',
active: false,
fillSpace: true
});
});
</script>
</html>