Difference between revisions of "M365/test"

From wiki
Jump to navigation Jump to search
m
Line 1: Line 1:
−
{{DISPLAYTITLE:<span style="position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);">{{FULLPAGENAME}}</span>}}
+
<!DOCTYPE html>
−
[[Image:MS365_Banner_-_Training_Materials.png|900px|https://wiki.gccollab.ca/M365/Home]]
+
<html>
−
__NOTOC__
+
<head>
−
__NOEDITSECTION__
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
[[FR:M365/Accueil]]
+
<style>
 +
.collapsible {
 +
  background-color: #777;
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 18px;
 +
  width: 100%;
 +
  border: none;
 +
  text-align: left;
 +
  outline: none;
 +
  font-size: 15px;
 +
}
  
−
='''M365 Training Materials'''=
+
.active, .collapsible:hover {
−
Here you'll find a collection of various M365-related training products to support public servants from across the GC. Click on one of the following icons to get started:
+
  background-color: #555;
−
<br>
+
}
−
=='''Training Materials by Application'''==
 
−
<br>
 
  
−
{|
+
.content {
−
|-
+
  padding: 0 18px;
−
| [[Image:Teams.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/Teams]] || [[Image:Blank.png|15px]]||[[Image:Word.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/Word]] || [[Image:Blank.png|15px]]||[[Image:Excel.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/Excel]] || [[Image:Blank.png|15px]]||[[Image:PowerPoint.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/PowerPoint]] || [[Image:Blank.png|15px]]||[[Image:SharePoint.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/SharePoint]] || [[Image:Blank.png|15px]]||[[Image:OneNote.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/OneNote]]
+
  max-height: 0;
−
|-
+
  overflow: hidden;
−
| [[Image:Outlook.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/Outlook]] || [[Image:Blank.png|15px]]||[[Image:OneDrive1.png|100px|link=https://wiki.gccollab.ca/M365/Home/OneDrive]] || [[Image:Blank.png|15px]]||[[Image:Planner.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/Planner]] || [[Image:Blank.png|15px]]||[[Image:PowerBI.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/PowerBI]] || [[Image:Blank.png|15px]]||[[Image:PowerAutomate.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/PowerAutomate]] || [[Image:Blank.png|15px]]||[[Image:PowerApp.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/PowerApp]]
+
  transition: max-height 0.2s ease-out;
−
|}
+
  background-color: #f1f1f1;
−
<br>
+
}
 +
</style>
 +
</head>
 +
<body>
  
−
# '''Training Materials by Type'''
+
<h2>Animated Collapsibles</h2>
  
−
Here you'll find a collection of learning materials sorted by type to support how you want to learn the various applications of the M365 suite of applications.
+
<p>A Collapsible:</p>
−
<br>
+
<button class="collapsible">Open Collapsible</button>
 +
<div class="content">
 +
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 +
</div>
  
−
='''Testing Subpage'''=
+
<p>Collapsible Set:</p>
−
* [[virtual_training]]
+
<button class="collapsible">Open Section 1</button>
 +
<div class="content">
 +
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 +
</div>
 +
<button class="collapsible">Open Section 2</button>
 +
<div class="content">
 +
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 +
</div>
 +
<button class="collapsible">Open Section 3</button>
 +
<div class="content">
 +
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 +
</div>
  
−
# [[M365/Home/Training|Virtual Training]]
+
<script>
−
# [[M365/Home/Articles|Articles]]
+
var coll = document.getElementsByClassName("collapsible");
−
# [[M365/Home/Learning Paths|Learning Paths]]
+
var i;
−
# [[M365/Home/Events|Learning Events]]
 
−
# [[M365/Home/Videos|Videos]]
 
−
# [[M365/Home/Recorded Webinars|Webinars]]
 
−
# [[M365/Home/Quick Guides|Guides]]
 
−
# [[M365/Home/Infographics|Infographics]]
 
−
# [[M365/Home/Templates|Templates]]
 
−
# [[M365/Home/Communities|Communities]]
 
−
# [[M365/Home/Social Media|Social Media]]
 
  
−
{|
+
for (i = 0; i < coll.length; i++) {
−
|-
+
  coll[i].addEventListener("click", function() {
−
|[[Image:Virtual_Training.PNG|This is a test description for Virtual Training|100px|link=https://wiki.gccollab.ca/M365/Home/Training]] || [[Image:Blank.png|15px]]||[[Image:Articles.PNG|This is a test description for Articles|100px|link=https://wiki.gccollab.ca/M365/Home/Articles]] ||[[Image:Blank.png|15px]]|| [[Image:Learning_Paths.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/Learning_Paths]] || [[Image:Blank.png|15px]]||[[Image:Learning_Events.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/Events]] ||[[Image:Blank.png|15px]]|| [[Image:Videos.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/Videos]] ||  [[Image:Blank.png|15px]]||[[Image:Webinars.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/Recorded_Webinars]]
+
    this.classList.toggle("active");
−
|-
+
    var content = this.nextElementSibling;
−
| [[Image:Guides.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/Quick_Guides]] ||[[Image:Blank.png|15px]]|| [[Image:Infographics.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/Infographics]] || [[Image:Blank.png|15px]]||[[Image:Templates.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/Templates]] || [[Image:Blank.png|15px]]||[[Image:Communities.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/Communities]] ||[[Image:Blank.png|15px]]|| [[Image:Social_Media.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/Social_Media]]
+
    if (content.style.maxHeight){
−
|}
+
      content.style.maxHeight = null;
−
<br>
+
    } else {
−
<!-- Virtual Training
+
      content.style.maxHeight = content.scrollHeight + "px";
−
-->
+
    }
−
{| width="100%" cellpadding="10"  
+
  });
−
|-valign="top"
+
}
−
|width="25%" style="color: black;" |
+
</script>
−
<!-- COLUMN 1 STARTS: -->
 
−
== '''New Content!'''==
 
−
{|
 
−
|-
 
−
| [[Image:Accessibility.PNG|90px|link=https://wiki.gccollab.ca/M365/Home/Accessibility]] || [[Image:Blank.png|15px]]||[[Image:Admin_-_EN.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/Administrators]]|| [[Image:Blank.png|15px]]||[[Image:Departments.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/Departmental_Resources]] ||[[Image:Blank.png|15px]]||[[Image:Blank.png|15px]]
 
−
|}
 
−
<br>
 
−
<!-- COLUMN 1 ENDS: -->  
 
  
−
|width="75%" style="color: black;" |
+
</body>
−
 
+
</html>
−
<!-- COLUMN 2 STARTS: -->
 
−
== '''Coming Soon!'''==
 
−
{|
 
−
|-
 
−
| [[Image:Apps.PNG|103px|link=https://wiki.gccollab.ca/M365/Home/Apps]] || [[Image:Blank.png|15px]]|| [[Image:E-books.PNG|100px|link=https://wiki.gccollab.ca/M365/Home/E-books]] || [[Image:Blank.png|15px]]||[[Image:Podcasts.PNG|97px|link=https://wiki.gccollab.ca/M365/Home/Podcasts]]
 
−
|}
 
−
<!-- COLUMN 2 ENDS: -->
 
−
|}
 
−
 
 
−
=='''Attributions and Sources'''==
 
−
<br>
 
−
<nowiki>*</nowiki>[[M365/Home/Attributions|Attributions and Sources]]<br>[https://www.gcpedia.gc.ca/wiki/Mobile_Services_-_Activating_Your_Device How to activate your mobile device]
 

Revision as of 12:10, 28 October 2022

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .collapsible { 

 background-color: #777;
 color: white;
 cursor: pointer;
 padding: 18px;
 width: 100%;
 border: none;
 text-align: left;
 outline: none;
 font-size: 15px;

}

.active, .collapsible:hover { 

 background-color: #555;

}

.content { 

 padding: 0 18px;
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.2s ease-out;
 background-color: #f1f1f1;

} </style> </head> <body>

Animated Collapsibles

A Collapsible:

<button class="collapsible">Open Collapsible</button>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Collapsible Set:

<button class="collapsible">Open Section 1</button>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<button class="collapsible">Open Section 2</button>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<button class="collapsible">Open Section 3</button>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<script> var coll = document.getElementsByClassName("collapsible"); var i;

for (i = 0; i < coll.length; i++) { 

 coll[i].addEventListener("click", function() {
   this.classList.toggle("active");
   var content = this.nextElementSibling;
   if (content.style.maxHeight){
     content.style.maxHeight = null;
   } else {
     content.style.maxHeight = content.scrollHeight + "px";
   } 
 });

} </script>

</body> </html>

Retrieved from "https://wiki.gccollab.ca/index.php?title=M365/test&oldid=81783"