Add collapable sections to Tools page (#8)

* 📱 add collapsing text

* 💄 collapsable sections

Author: angelphanth

4tools.md

@@ -4,51 +4,63 @@ title: Tools
 permalink: /tools/
 ---
 
-# Clinical Knowledge Graph -- CKG
+<details open>
+  <summary>Clinical Knowledge Graph - CKG</summary>
+  <h3>Integrating and Interpreting MS-based Proteomics Data</h3>
+  <p>The Clinical Knowledge Graph (CKG) is a graph database with millions of nodes and relationships representing experimental data, databases, and scientific literature. Further, CKG is an open-source platform that allows easy expansion with new databases and experimental data types and it includes statistical and machine learning tools for faster proteomics analysis.</p>
+  <p>We are currently working on a new version that will be more flexible and generalizable. <b>Stay tuned!</b></p>
+  <img src="{{ site.baseurl }}/public/ckg.jpeg" style="width:100%">
+</details>
 
-## Integrating and Interpreting MS-based Proteomics Data
 
-The Clinical Knowledge Graph (CKG) is a graph database with millions of nodes and relationships representing experimental data, databases, and scientific literature. Further, CKG is an open-source platform that allows easy expansion with new databases and experimental data types and it includes statistical and machine learning tools for faster proteomics analysis. 
+<details open>
+  <summary>OrthoHPI 2.0</summary>
+  <h2>Orthology–based Host–Parasite Protein–protein Interactions <a href="https://orthohpi.streamlit.app/">[link]</a></h2>
+  <p>Understanding host-parasite interactions is vital for tackling infectious diseases. Due to the challenges in experimental identification, we propose a computational method to predict protein interactions between human and 18 eukaryotic parasites. Our approach leverages an orthology-based transfer of interactions, focusing on parasite secretomes and human membrane proteins. We also filter the host proteome based on the parasites' specific tissue tropisms. In this version, we added  cell-type specific expression annotations to provide further resolution of the host-parasite predicted interactions and we support interactions with structural information.</p>
+  <h3>Giardia intestinalis Predicted PPI</h3>
+  <iframe src="{{ site.baseurl }}/public/Gi_network.html" width="600" height="450" style="border:0;"></iframe>
+</details>
 
-We are currently working on a new version that will be more flexible and generalizable. **Stay tuned!**
 
-<img src="{{ site.baseurl }}/public/ckg.jpeg" style="width:100%">
+<details open>
+  <summary>Analytics Core (Acore) Library</summary>  
+  <p>Acore, short for analytics core, is an open-source Python library to preprocess and analyse multi-omics data. It includes functionality related to preprocessing, e.g. for data normalization, missing value imputation or feature selection, and functionality for statistical data analysis, e.g. an analysis of covariance.</p> 
+  <p>Acore is designed to be user-friendly and flexible, allowing users to easily apply different analysis strategies, testing effects of choosing specific steps.</p>
+  <h4>Check out current recipes and the core libary documentation at <a href="https://analytics-core.readthedocs.io/">analytics-core.readthedocs.io</a></h4>
+</details>
 
 
-# OrthoHPI 2.0 [[link]](https://orthohpi.streamlit.app/)
+<details open>
+  <summary>VueGen</summary>  
 
-## Orthology–based Host–Parasite Protein–protein Interactions
+  <div style="text-align: center; margin-bottom: 20px;">
+    <a href="https://github.com/Multiomics-Analytics-Group/vuegen" target="_blank">
+      <img src="https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/vuegen_logo.svg" alt="VueGen" width="250px">
+    </a>
+  </div>
 
-Understanding host-parasite interactions is vital for tackling infectious diseases. Due to the challenges in experimental identification, we propose a computational method to predict protein interactions between human and 18 eukaryotic parasites. Our approach leverages an orthology-based transfer of interactions, focusing on parasite secretomes and human membrane proteins. We also filter the host proteome based on the parasites' specific tissue tropisms. In this version, we added  cell-type specific expression annotations to provide further resolution of the host-parasite predicted interactions and we support interactions with structural information.
+  <p><b>VueGen</b> is a tool that automates the creation of <b>reports</b> from bioinformatics outputs, allowing researchers with minimal coding experience to communicate their results effectively. With VueGen, users can produce reports by simply specifying a directory containing output files, such as plots, tables, networks, Markdown text, HTML components, and API calls, along with the report format. Supported formats include <b>documents</b> (PDF, HTML, DOCX, ODT), <b>presentations</b> (PPTX, Reveal.js), <b>Jupyter notebooks</b> and <a href="https://streamlit.io/"><b>Streamlit</b></a> <b>web applications</b>.</p>
 
-### Giardia intestinalis Predicted PPI
-<iframe src="{{ site.baseurl }}/public/Gi_network.html" width="600" height="450" style="border:0;"></iframe>
+  <p>An overview of the VueGen workflow is shown in the figure below:</p>
 
-# Analytics Core (Acore) Library
+  <img src="https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/vuegen_graph_abstract.png">
 
-Acore, short for analytics core, is an open-source Python library 
-to preprocess and analyse multi-omics data. It includes functionality related to preprocessing, e.g. for 
-data normalization, missing value imputation or feature selection, and functionality for statistical data analysis, e.g. an analysis of covariance.
-Acore is designed to be user-friendly and flexible, allowing users to easily apply 
-different analysis strategies, testing effects of choosing specific steps.
+  <p>VueGen offers various implementation options for both non-technical and experienced users. It is available as a <a href="https://pypi.org/project/vuegen/">Python package</a>, <a href="https://quay.io/repository/dtu_biosustain_dsp/vuegen">Docker image</a>, <a href="https://github.com/Multiomics-Analytics-Group/nf-vuegen/">nf-core module</a>, and <a href="https://github.com/Multiomics-Analytics-Group/vuegen/releases/tag/v0.3.2">cross-platform desktop application</a> with a user-friendly interface, making it accessible and customizable for different user needs and expertise levels.</p>
 
-Especially recipes will help to get started and explore several options for data analysis.
+  <p>The documentation is available at <a href="https://vuegen.readthedocs.io/">vuegen.readthedocs.io</a>, where you can find detailed information of the package’s classes and functions, installation and execution instructions, and case studies to demonstrate its functionality.</p>
 
-Check out current recipes and the core libary documentation at 
-[analytics-core.readthedocs.io](https://analytics-core.readthedocs.io/).
+</details>
 
-<div style="text-align: center; margin-bottom: 20px;">
-  <a href="https://github.com/Multiomics-Analytics-Group/vuegen" target="_blank">
-    <img src="https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/vuegen_logo.svg" alt="VueGen" width="250px">
-  </a>
-</div>
 
-**VueGen** is a tool that automates the creation of **reports** from bioinformatics outputs, allowing researchers with minimal coding experience to communicate their results effectively. With VueGen, users can produce reports by simply specifying a directory containing output files, such as plots, tables, networks, Markdown text, HTML components, and API calls, along with the report format. Supported formats include **documents** (PDF, HTML, DOCX, ODT), **presentations** (PPTX, Reveal.js), **Jupyter notebooks**, and [Streamlit](https://streamlit.io/) **web applications**.
+<details open>
+  <summary>Additional Tool (Template)</summary>  
 
-An overview of the VueGen workflow is shown in the figure below:
+  <img src="url or path to img" width="10%" alt="example icon">
 
-![VueGen Abstract](https://raw.githubusercontent.com/Multiomics-Analytics-Group/vuegen/main/docs/images/vuegen_graph_abstract.png)
+  <p>Paragraph of text inside</p>
 
-VueGen offers various implementation options for both non-technical and experienced users. It is available as a [Python package](https://pypi.org/project/vuegen/), [Docker image](https://quay.io/repository/dtu_biosustain_dsp/vuegen), [nf-core module](https://github.com/Multiomics-Analytics-Group/nf-vuegen/), and [cross-platform desktop application](https://github.com/Multiomics-Analytics-Group/vuegen/releases/tag/v0.3.2) with a user-friendly interface, making it accessible and customizable for different user needs and expertise levels.
+  <h2>This is a subheader in the collapsable section.</h2>
 
-The documentation is available at [vuegen.readthedocs.io](https://vuegen.readthedocs.io/), where you can find detailed information of the package’s classes and functions, installation and execution instructions, and case studies to demonstrate its functionality.
+  <p>More text here if you want</p>
+
+</details>

public/css/hyde.css

@@ -369,3 +369,17 @@ a.topbar-nav-item:focus {
 .theme-base-0f .related-posts li a:hover {
   color: #8f5536;
 }
+
+/* Collapsable section */
+details {
+  margin-bottom: 1rem;
+}
+summary {
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 2rem;
+  color: black;
+}
+summary:hover {
+  color: rgb(134,184,212);
+}