Collapsable text in Weebly.
I have been asked how to create collapsable/expandable text in Weebly. This is the method I used for my ePortfolio to show/hide the learning and course outcomes for each course.
http://guidefaq.com/a.php?qid=5454
You need to add an embed code block to your page and enter the code from the site. You then edit the text parts for what you need. I chose not to use an image like in the example so I removed some of the code.
Below is the code I used for the Course Learning Outcomes for OLTD 509. You may use it or alter it as you wish. Note: as per the instructions on the website, you will see that there is an identifier 'para2' in the code. This is because it is the second block of expandable text that I had used on this page. If you are doing your first one you would type 'para1'. If you were doing your third one you would type 'para3'. Otherwise everything will default to the first block when you publish!
Have fun (code below)
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
var i = document.getElementById(a + '_image');
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return false;
}
</script>
<h3><a style="cursor:pointer;" onclick="return toggleMe('para2')">Course Learning Outcomes (click to expand)</a></h3>
<div id="para2" style="display:none; color:white">
</br> - Be familiar with common terms, definitions and elements related to emerging technologies. </br></br>
- Research and identify emerging technologies with educational applications not yet adopted by mainstream education or in early adoption phases.</br></br>
- Examine current research around technology/pedagogy adoption, best practices for change management and technology integration.</br></br>
- Adapt or develop a framework for assessing emerging technologies/pedagogies.</br></br>
- Consider potential design/implementation opportunities and challenges of emerging technologies/pedagogies.</br></br>
- Discuss potential digital citizenship and appropriate use issues.
</div>
I have been asked how to create collapsable/expandable text in Weebly. This is the method I used for my ePortfolio to show/hide the learning and course outcomes for each course.
http://guidefaq.com/a.php?qid=5454
You need to add an embed code block to your page and enter the code from the site. You then edit the text parts for what you need. I chose not to use an image like in the example so I removed some of the code.
Below is the code I used for the Course Learning Outcomes for OLTD 509. You may use it or alter it as you wish. Note: as per the instructions on the website, you will see that there is an identifier 'para2' in the code. This is because it is the second block of expandable text that I had used on this page. If you are doing your first one you would type 'para1'. If you were doing your third one you would type 'para3'. Otherwise everything will default to the first block when you publish!
Have fun (code below)
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
var i = document.getElementById(a + '_image');
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return false;
}
</script>
<h3><a style="cursor:pointer;" onclick="return toggleMe('para2')">Course Learning Outcomes (click to expand)</a></h3>
<div id="para2" style="display:none; color:white">
</br> - Be familiar with common terms, definitions and elements related to emerging technologies. </br></br>
- Research and identify emerging technologies with educational applications not yet adopted by mainstream education or in early adoption phases.</br></br>
- Examine current research around technology/pedagogy adoption, best practices for change management and technology integration.</br></br>
- Adapt or develop a framework for assessing emerging technologies/pedagogies.</br></br>
- Consider potential design/implementation opportunities and challenges of emerging technologies/pedagogies.</br></br>
- Discuss potential digital citizenship and appropriate use issues.
</div>