Conceal side panel navigation on OJS version 2.4.8.5

My college utilizes an outdated version of Open Journal System, 2.4.8.5. Unfortunately, the HTML does not accommodate <details> and <summary> tags, and JavaScript cannot be used. Despite this limitation, I have the ability to upload my own stylesheet where certain CSS codes can be modified.

I am interested in creating a block sidebar that resembles the design found at this link:

To see a similar implementation in action, visit here.

The location where I would like to implement this feature is at .

Any assistance you can provide on this matter is greatly appreciated.

htmlcssnavigationojs

Answer №1

Here's a clever CSS-only solution for adding functionality to your website. By using radio buttons, you can easily control which panels are displayed. Simply mark a radio button as :checked, and the following span will appear.

.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...</p>
    </span>
</div>
<div class="dropdown">
    <h1>Title 2</h1>
    <input type="radio" name="dropdown">
    <span>
        <p>Lorem ipsum dolor sit amet...</p>
    </span>
</div>
<div class="dropdown">
    <h1>Title 3</h1>
    <input type="radio" name="dropdown">
    <span>
        <p>Lorem ipsum dolor sit amet...</p>
    </span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason behind a CSS caption overlapping another image within this table?

This is the CSS caption effect I am using: .cell { position: relative; width: 180px; height: 180px; } .caption {} .cell .caption { opacity: 0; text-decoration-color: gray; text-align: center; background: #eaeaea; position: absolute; fo ...

htmlcsshover

Is it possible to create a collapse and expand animation that does not involve transitioning the `height

After extensively researching, I have come across numerous articles advocating for the use of transform and opacity for achieving smooth CSS transitions. An example can be found here: The prevailing notion always revolves around: ...the optimization ...

javascripthtmlcssreactjsstyled-components

Unable to render a form in Servlet HTML

Encountering a similar issue to one I faced previously, but the previous workaround is ineffective this time. The code related to the section is generating the errors displayed below. If the image doesn't load, here's the code: LongLivedCo ...

javahtmljspservlets

Tips for maintaining the size of child elements within a parent container without affecting the font size in CSS

I have a basic navigation bar setup: <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Register</a> </nav> Along with the CSS styling for the navigation and anchor tags: nav { background- ...

htmlcss

Checkbox usage for populating value placeholders

Currently, I have a form with 4 checkbox elements and a text field at the top. The text field contains a placeholder in the format of a product name followed by the product price. Each checkbox corresponds to a product name and price, and my goal is to use ...

javascripthtmljquery

The mix-blend-mode feature is not compatible with Chrome browser

I'm having an issue with the mix-blend-mode property in Chrome, as it's not functioning correctly. However, it works perfectly fine on Firefox and Safari. My goal is to achieve a cutout text effect. Thank you for any assistance! h1 { mix-blend ...

cssmix-blend-mode

What is the best way to highlight a certain word within a paragraph tag using color

Is there a method to highlight a particular word within a paragraph with color? Here is the desired outcome: For example, in <p>Hello World</p>, I wish to emphasize the word "World" inside the sentence. Would it be possible to accomplish thi ...

phphtml

JavaScript: Retrieve the following instance of a div element

Is it possible to create a single function that will only impact the next instance of a div with the class "hiddenDiv" in relation to the clicked link? For example: <p><a href="#" class="showDivLink">click to show/hide div</a></p> ...

javascripthtmlcss

"Customize your map pins on Google Maps by updating the marker location through a

I am trying to update the position of a map marker based on a dropdown selection. Upon changing the dropdown option, I retrieve the latitude and longitude values and want to set these coordinates for my current marker. Here is the code snippet: $("#locati ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3

How can I improve a gif's background for optimal viewing on mobile devices?

Hey there! I'm facing an issue with a gif running as the background on my website. On my phone, the whole screen isn't filled up and there's just a black space halfway down. You can check it out at . Do you know how to make the gif take up t ...

htmlcssmobileoptimizationgif

Ensure that the innerHTML of the span tag does not contain line breaks

Is there a way to prevent the span tag inside the div with the item class innerHTML from causing a line break, regardless of its length? I also need to ensure that any innerHTML exceeding the item width does not overlap but is hidden. I have attempted usin ...

csswidthlinebreak

Radio button for the Choice Field is missing from the admin panel

I have a passenger model where I can view all the fields except for the choice field for selecting the gender of the patient. I need this option in my form, but the Gender field is not showing up in my admin panel at all. What could be causing this issue ...

pythonhtmldjangourlview

When you hover over a link, the target will appear in the status bar with location.href

Upon clicking the code snippet provided, it redirects me to a dynamically generated details page: <tr class="itemList" onclick="location.href='Details/' + @item.ID"> However, my concern is that the target URL (website/Details/ID) does not ...

javascripthtmlcssasp.net-mvclocation-href

Tips on changing the outline color by clicking

I'm working on a simple code where I need to change the outline color when a user clicks on a text field. <input type="text" id="box1" /> <input type="password" id="box2" /> <input type="email" id="box3" /> <input type="submit" ...

javascriptjqueryhtmlcss

Anchored text is obscured by a fixed Bootstrap 4 navigation bar at the top

I'm currently developing a website that utilizes bootstrap 4. I have successfully fixed the <nav> element to the top of the page using the fixed-top class. Despite applying padding-top to the <body> tag as recommended, I am encountering an ...

htmlcsstwitter-bootstrapbootstrap-4

Transferring CSV information from a div container to an Excel spreadsheet

At this moment, when I have a <textarea> structured as follows: <textarea> 1, 2, 3, 4 5, 6, 7, 8 9, 10, 11, 12 </textarea> and then attempt to transfer the content to Excel, it prompts me to paste from a comma-separated source. However ...

htmlcssexcelcsv

What is the best way to have a single item in a list displayed in two columns?

Can the angular repeat achieve this functionality? I am looking to loop the two elements together. Any assistance would be greatly appreciated! Controller: $scope.date=[ {ID:1,Date:'2016-11-12'}, {ID:2,Date:'2016-11-15'}, ...

javascripthtmlangularjsangularjs-ng-repeat

Showing the values of two distinct select boxes in a URL

Here are both select boxes, the goal is to display selected values from both in the URL. This can be achieved by displaying them like this: e.g www.example.com#135+#140 OR www.example.com#135&140 (The order of values doesn't matter as long as bot ...

javascriptjqueryhtmlselectparameters

The button shifts position when a new field is added to the list above

Hey everyone! Here's the issue: I have 3 tables that display lists of items. Below each list, there are 2 buttons (cancel/submit). However, when I add a row to one of the lists, the buttons move to the right inexplicably. What could be causing this s ...

cssdombutton

Using JavaScript to connect with the OFX Server

I'm currently working on a project that involves calling the OFX server from my Javascript file. I've been using the jQuery ajax method to make this web service call. However, when I try to call the web service, I keep encountering the following ...

javascripthtmljqueryofx