Expanding and Collapsing Sections in the Contempo Sidebar...
To reuse the expanding and collapsing feature of the archive, the first thing that I did was to inspect the code for the archive. After some investigation, I determined, that in the archive, the key component is the <details> tag. Within the details tag are the up and down arrows and the archive list itself. As a result of my research, after, ripping out the archive list, I came up with the following code:
In the code above, the Lorem Ipsum title will need to be changed to something more meaningful and some HTML will need to be added in the space provided. If all that was needed was an expanding and collapsing section with some HTML in the middle, then this code could be copied and pasted into an HTML/JavaScript gadget, and would function correctly -- almost.<details class="collapsible extendable"> <summary> <div class="collapsible-title"> <h3 class="title"> Lorem Ipsum </h3> <svg class="svg-icon-24 chevron-down"> <use xlink:href="/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use> </svg> <svg class="svg-icon-24 chevron-up"> <use xlink:href="/responsive/sprite_v1_6.css.svg#ic_expand_less_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use> </svg> </div> </summary> <div class="widget-content"> <!-- Your HTML STARTS here --> Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <!-- Your HTML ENDS here --> </div> </details>
I say almost, because, a close inspection of the operation of the archive menu, will reveal that when selected, the archive menu will open and close with a smooth animation effect. Although the code above, in the details tag, will allow the section to toggle open and closed, the animation effect is missing. The restore the animation, I came up with the following script:
<script type="text/javascript">
var me = document.currentScript;
me.parentNode.className="widget BlogArchive";
me.parentNode.setAttribute("style", "margin:0px;padding:0px;");
var h3s=me.parentNode.parentNode.getElementsByTagName("h3");
if (h3s.length>=2) {
h3s[0].setAttribute("style", "display:none;");
}
</script>
The script is really a small hack with some additional tweaks. The innermost DIV container surrounding the transplanted details tag needs to have its class name changed to mimic an archive section and the margins and padding need to be adjusted as well. Also, if the gadget's title has been filled in, that title will need to be hidden. The script relies heavily on its current position in the page hierarchy to locate the necessary DIV container and a wayward title (H3) (if any), so, it's important that the script occur immediately after the details tag as shown below:For my own custom About Me section, I just hard-coded a handful of links using ul and li tags and for good measure, thanks to Zack Hall, I added a CSS-based Person Icon as a background for the section.<details class="collapsible extendable"> <summary> <div class="collapsible-title"> <h3 class="title"> Lorem Ipsum </h3> <svg class="svg-icon-24 chevron-down"> <use xlink:href="/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use> </svg> <svg class="svg-icon-24 chevron-up"> <use xlink:href="/responsive/sprite_v1_6.css.svg#ic_expand_less_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use> </svg> </div> </summary> <div class="widget-content"> <!-- Your HTML STARTS here --> Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <!-- Your HTML ENDS here --> </div> </details> <script type="text/javascript"> var me = document.currentScript; me.parentNode.className="widget BlogArchive"; me.parentNode.setAttribute("style", "margin:0px;padding:0px;"); var h3s=me.parentNode.parentNode.getElementsByTagName("h3"); if (h3s.length>=2) { h3s[0].setAttribute("style", "display:none;"); } </script>
Proof Of Concept For A Link List With Expand/Collapse
Then, just when I thought I was done, someone noticed my work and wanted to know if it might be possible to use this technique on a link list. To take this experiment to the next logical step, I thought it would be useful to create of proof-of-concept gadget to test the feasibility of this technique. So, to keep things simple, first, I created a sample link list and then added an HTML/JavaScript gadget immediately after the link list to apply the expand/collapse animation to the link list.To implement this functionality, some changes to the original gadget (shown above) would be needed to crawl up the page hierarchy to grab the link list and dump it into the the space provided for HTML. With the amended gadget (shown below), custom HTML can no longer be placed within the gadget as any custom HTML would be overwritten by the revised script:
<details class="collapsible extendable">
<summary>
<div class="collapsible-title">
<h3 class="title">
Lorem Ipsum
</h3>
<svg class="svg-icon-24 chevron-down">
<use xlink:href="/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
<svg class="svg-icon-24 chevron-up">
<use xlink:href="/responsive/sprite_v1_6.css.svg#ic_expand_less_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</div>
</summary>
<div class="widget-content">
</div>
</details>
<script type="text/javascript">
var me = document.currentScript;
me.parentNode.className="widget BlogArchive";
me.parentNode.setAttribute("style", "margin:0px;padding:0px;");
var h3s=me.parentNode.parentNode.getElementsByTagName("h3");
if (h3s.length>=2) {
h3s[0].setAttribute("style", "display:none;");
}
var prevobj=me.parentNode.parentNode.previousElementSibling;
if (prevobj.className.indexOf("LinkList")>-1) {
var podivs=prevobj.getElementsByTagName("div");
var dtdiv=me.parentNode.firstElementChild.lastElementChild;
dtdiv.innerHTML=podivs[0].innerHTML;
prevobj.setAttribute("style", "display:none;");
}
</script>
Now, the last piece of this puzzle is to style the bullet points. The default for an archive list is to have most of the bullet points hidden, but, for a link list, the bullet points should show. So, the following CSS should make the bullet points visible:
.widget.HTML .widget.BlogArchive ul,
.widget.HTML .widget.BlogArchive li {
list-style: disc outside none !important;
list-style-type: disc !important;
list-style-position: outside !important;
list-style-image: none !important;
}
.widget.HTML .widget.BlogArchive li {
margin-left:20px;
}
The CSS would be added using Theme > Customize > Advanced > Add CSS. I may have gone a bit overboard with the CSS selectors, but, I had some difficulty getting the bullet points to reappear on a plain vanilla Contempo template.Overall, this solution works (Chrome, Firefox and Edge, but, not IE) as a proof of concept, but, it needs quite a bit of improvement. First, a major drawback of this proof-of-concept gadget is that the same gadget is needed for each and every link list to be converted. Ideally, it would be nice to have some sort of flag in each link list that could be used to invoke the script, so, that only one extra gadget would be needed for all of the link lists. Second, instead of using the HTML gadget as the link list, I would want to dynamically rearrange the link list itself. Maybe, someone will look at this proof of concept, laugh, and be inspired to come up with something better. 😜
A Note About Internet Explorer
In case you were wondering, the latest version of classic IE (11) which is not Edge, doesn't support document.currentScript. That portion of the script would need to be changed to something like: document.getElementById("details1") and the details tag would need to have a matching id like: <details class="collapsible extendable" id="details1"> for the script to function as intended in IE. And, each subsequent gadget would need to have a different id such as details2 or details3 to prevent the various scripts from targeting the wrong gadget. Of course, if you're viewing this site in IE, you'll note that my About Me section already includes the workaround for IE.Since about 5% of my visitors still apparently use IE, it seems only fair to support their valiant, if ultimately doomed, efforts. It's difficult to say with any certainty though, as the standard stats app bundled with Blogger, lumps both Edge and IE into the same bucket, but, Edge supports the original script while classic IE does not. Even though I do like to make light of IE, if the truth should be told, I still use IE for some of my browsing needs as it still has an effective and aggressive popup blocker that blocks popups better than Edge.
By the way, the secret image for this post is Rachel from Angels Of Death. That's all that I have for today. Enjoy.
