Search code examples
htmlcssnavigationojs

Collapse sidebar navigation in OJS 2.4.8.5

My university uses Open Journal System 2.4.8.5 (a very old version). The HTML does not support <details> and <summary> and I cannot use JS. Also, I do not have access to the server but we are allowed to upload our own stylesheet where I can replace some built-in CSS codes.

I want to make a block sidebar that looks like this:

1

You can see it in action here.

The side where I want to apply this is http://jurnal.unsyiah.ac.id/SiELE.

Thank you very much for your kind help.

Solution

  • Here is a solution that relies entirely on CSS for functionality. Radio buttons are used to track whether a panel is being viewed. When a radio button is :checked, the span that immediately follows is displayed.

    .dropdown {
    border-color: #eeeeee;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    font-family: sans-serif;
    margin: 10px;
    overflow: hidden;
    position: relative;
}
.dropdown h1 {
    background-color: #eeeeee;
    padding: 10px 20px;
    margin: 0;
    width: 100%;
}
.dropdown input {
    display: block;
    float: right;
    position: absolute;
    right: 10px;
    top: 10px;
    visibility: hidden;
}
.dropdown input:after {
    content: "+";
    float: right;
    font-size: 25px;
    visibility: visible;
}
.dropdown input:checked:after {
    content: '\2013';
}
.dropdown input + span {
    display: none;
    padding: 10px 20px;
}
.dropdown input:checked + span {
    display: block
}
    <div class="dropdown">
    <h1>Title 1</h1>
    <input type="radio" name="dropdown">
    <span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra ex massa, at suscipit justo sagittis quis. Duis sed orci lorem. In purus metus, lacinia ac nibh vitae, gravida malesuada urna. Suspendisse potenti. Vivamus tellus ligula, iaculis nec ex vel, dictum interdum augue. Mauris dignissim orci tincidunt, feugiat purus nec, rhoncus nulla. Etiam consequat ullamcorper lobortis. Integer vel erat dapibus, tincidunt nunc eu, sodales ex. Cras a dolor ut libero gravida sagittis. In hac habitasse platea dictumst. Aliquam et sapien porttitor, ullamcorper tellus ut, viverra orci. Morbi sit amet lacus a arcu varius eleifend sit amet vitae lacus. Pellentesque quis sagittis metus.</p>
    </span>
</div>
<div class="dropdown">
    <h1>Title 2</h1>
    <input type="radio" name="dropdown">
    <span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra ex massa, at suscipit justo sagittis quis. Duis sed orci lorem. In purus metus, lacinia ac nibh vitae, gravida malesuada urna. Suspendisse potenti. Vivamus tellus ligula, iaculis nec ex vel, dictum interdum augue. Mauris dignissim orci tincidunt, feugiat purus nec, rhoncus nulla. Etiam consequat ullamcorper lobortis. Integer vel erat dapibus, tincidunt nunc eu, sodales ex. Cras a dolor ut libero gravida sagittis. In hac habitasse platea dictumst. Aliquam et sapien porttitor, ullamcorper tellus ut, viverra orci. Morbi sit amet lacus a arcu varius eleifend sit amet vitae lacus. Pellentesque quis sagittis metus.</p>
    </span>
</div>
<div class="dropdown">
    <h1>Title 3</h1>
    <input type="radio" name="dropdown">
    <span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra ex massa, at suscipit justo sagittis quis. Duis sed orci lorem. In purus metus, lacinia ac nibh vitae, gravida malesuada urna. Suspendisse potenti. Vivamus tellus ligula, iaculis nec ex vel, dictum interdum augue. Mauris dignissim orci tincidunt, feugiat purus nec, rhoncus nulla. Etiam consequat ullamcorper lobortis. Integer vel erat dapibus, tincidunt nunc eu, sodales ex. Cras a dolor ut libero gravida sagittis. In hac habitasse platea dictumst. Aliquam et sapien porttitor, ullamcorper tellus ut, viverra orci. Morbi sit amet lacus a arcu varius eleifend sit amet vitae lacus. Pellentesque quis sagittis metus.</p>
    </span>
</div>