Upon loading the page, the div containing the links is initially hidden by setting display: none. When Romano is clicked, a temporary visibility is set using .clicker:focus + .hiddendiv. However, this only works when .clicker is in focus, which changes once a link is clicked.
Unfortunately, it seems impossible to solve this with pure CSS due to the lack of a previous selector or parent selector. This makes targeting the display of .hiddendiv from a child link challenging without JavaScript.
To address this issue with minimal changes, consider using JavaScript (preferably jQuery) as shown below:
HTML:
<p class="autori" onclick="show()"/>
CSS:
.visible {
display: block;
}
(Remove the .clicker:focus + .hiddendiv selector)
JavaScript / jQuery:
function show() {
$(".hiddendiv").toggleClass("visible");
}
This script toggles the visibility of .hiddendiv when 'Romano' is clicked. If you prefer the div to always be visible, replace .toggleClass() with .addClass().
If JavaScript is not an option, there is a workaround using raw CSS! By utilizing a pseudo-checkbox and modifying the HTML structure, you can toggle visibility effectively. See the updated solution without JavaScript provided below for detailed instructions.
Updated Solution Without JavaScript
You can achieve the same effect without JavaScript by simulating button clicks with modified HTML structure. By creating a label for a hidden checkbox that triggers visibility changes, you can control the display of .hiddendiv solely through CSS:
<input type="checkbox" id="show" />
<label for="show">
<div class="clicker" tabindex="1">
<h2 id="sigil_toc_id_2">
<p class="autori" id="id_romano">Romano</p>
</h2>
</div>
</label>
The CSS modifications are essential for this method to work. Hide the checkbox and set up styles based on its :checked status:
#show {
display: none;
}
#show:checked ~ .hiddendiv {
display: block;
}
#show:not(:checked) ~ .hiddendiv {
display: none;
}
By removing the previous selectors and implementing these changes, you can create a visibility toggle for a separate div using only HTML and CSS!
Enhanced Solution With No JavaScript And Multiple Hidden Content Divs
For scenarios where multiple hidden sections need individual toggling, you can expand on the previous technique by introducing distinct checkboxes with similar naming conventions. Adjust the structure and CSS styling accordingly to handle various hidden content divisions simultaneously.
Here's an example of how to implement this feature with multiple toggles controlling different hidden divs:
HTML:
<input type="checkbox" id="show_1" />
<label for="show_1"></label>
</input>
<input type="checkbox" id="show_2" />
<label for="show_2"></label>
</input>
CSS:
[id^=show] {
display: none;
}
[id^=show]:checked ~ .hiddendiv {
display: block;
}
[id^=show]:not(:checked) ~ .hiddendiv {
display: none;
}
With these modifications, you can efficiently manage multiple hidden content divs without relying on JavaScript, ensuring seamless toggling functionality across different sections.