Link an anchor to an input element and ensure it is in the checked state

I need to create a clickable anchor link that automatically adds the :checked property to an input when clicked. Is it possible to achieve this using only CSS and without relying on JavaScript? The system I'm working with has limitations that prevent the use of JavaScript.

.toggle:checked+h3+.collapsible-factuur-content {
        background-color: pink;
    }
<a href="#details">Link to the anchor</a>

<div style="margin-top: 750px;">&nbsp;</div>


<div id="details">
    <mark>The anchor</mark>
</div>

<input class="toggle" id="collapsible-details-historiek" type="checkbox" data-hj-masked="">
<h3>
    <label class="gp-product" for="collapsible-details-historiek">
        <i class="fas fa-history"></i>
        <h4>Title of the item</h4>
    </label>
</h3>
<div class="collapsible-factuur-content" id="details-algemeen">
    Content of the item.
</div>

htmlcssinputcheckbox

Answer №1

Regrettably, it is not feasible without the utilization of JavaScript.

The system seems to have a strong aversion towards JavaScript... Could it be due to an event listening restriction?

Update :

You mentioned something regarding the system's handling of JavaScript:

<a href="#details" onclick="checkInput()">Link to the anchor</a>

<div style="margin-top: 750px;">&nbsp;</div>


<div id="details">
    <mark>The anchor</mark>
</div>

<input class="toggle" id="collapsible-details-historiek" type="checkbox" data-hj-masked="">
<h3>
    <label class="gp-product" for="collapsible-details-historiek">
        <i class="fas fa-history"></i>
        <h4>Title of the item</h4>
    </label>
</h3>
<div class="collapsible-factuur-content" id="details-algemeen">
    Content of the item.
</div>

JavaScript :

function checkInput() {
  const input = document.querySelector('#collapsible-details-historiek');
  input.checked = true;
}

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

Tips for adjusting the size of an image to fit within the page layout alongside navigation bars

I am currently working on adjusting the size of my image to fit on the page without requiring a scroll. It appears that the jumbotron and navigation elements are causing the image to be pushed down. To address this issue, I thought about placing the image ...

htmlcssimagenavigation

What is the method for creating a button that has a gradient background and no border, but is still the same size as a button that has a border (

My code is based on Bootstrap v4 and I am facing an issue with creating gradient backgrounds for primary buttons that also use outline. The challenge is to maintain the same height and width for both buttons without the 2px border on the primary buttons. G ...

htmlcsstwitter-bootstrapbootstrap-4

Struggling with getting a page-break to properly function within a Bootstrap modal

I have a Bootstrap (v4) Modal that consists of multiple sections, and I am trying to print the content of the modal-body with each section starting on a new page. To achieve this, I have included the following CSS: section { page-break-after: always; ...

cssprintingbootstrap-4bootstrap-modalpage-break

Tips for extracting both the div and entire inner content using JavaScript

I need to retrieve the inner content of a div using JavaScript For example: <div id="content" style="height: 20px; overflow: hidden"> content<br>content<br>content<br> </div> This is my HTML code. I only know the div&apos ...

javascripthtml

Changing the background color dynamically of a table header in Angular Material

I have utilized the angular material table following this example. https://stackblitz.com/angular/jejeknenmgr?file=src%2Fapp%2Ftable-basic-example.ts In this case, I modified the heading color with the following CSS code. .mat-header-cell { backgrou ...

cssangularhtml-tableangular-material

Retrieve the href value from a DOM element

I'm currently working on a piece of code that aims to extract only the hrefs from the nav section. Here's what I have so far: componentDidMount(){ $("nav ul li a").each(function(k, j){ console.log(j); }); } So far, I've bee ...

javascriptjqueryhtmlreactjs

Unresponsive Button_tag within a Rails table

The situation is as follows: I have a button_tag located within a form that is nested inside a table: <div class="table-responsive tableBG"> ** Interestingly, the button functions perfectly when placed here ** <table class="table table-striped ...

htmlbootstrap-4ruby-on-rails-5twitter-bootstrap-rails

What is the best way to position an element on the left side of the navbar without having it animated?

Could someone assist me in placing the Life's Good logo on the left side of the nav bar without applying the animation from the "btn" class? Below is a snippet of my code with an example where I want the logo highlighted in Yellow: * { padding:0; m ...

htmlcssnavbar

Pressing the icon will trigger a top-sliding dropdown mobile menu to appear

How can I ensure my mobile dropdown menu slides in from the top when the user clicks the "header-downbar-menu" icon and slides out to the top when clicked again? Currently, the button only shows the menu but I am struggling with writing the JavaScript for ...

javascripthtmlcssdropdown

HTML integration of JavaScript not working as expected

My experience with separating files in HTML and JS has been positive - everything works smoothly when I link the JS file to the HTML. However, an issue arises when I decide to include the JS code directly within <script> tags in the HTML itself. The ...

javascripthtml

Preserve the form's values after an onclick event to maintain the user's input in session storage

My website consists of a single page with an interface designed to showcase prediction results in {{ prediction_text }} from a flask backend. Users input values into a form that utilizes the app.py script to generate prediction outcomes. The issue I am fac ...

javascriptjqueryhtmlforms

Inserting a Specific Iframe into a Designated Location in HTML with the Help of Jquery

Currently, I am encountering an issue with placing a dynamically created iframe inside a specific section of my webpage. The iframe is supposed to be contained within a div element named "maps", but instead it is appearing at the bottom of the page.This ma ...

javascriptjqueryhtmldom

A guide on incorporating jQuery alert messages into Angular 2

Whenever I submit a form by clicking on the "send message" button, I want to display an Alert message using jQuery. However, currently, I have to double click for the alert message to appear. How can I make it so that the alert message is shown with just o ...

htmlangular

Data displayed in a table-like format

Is there a way to achieve this layout view image here (currently done using tables) while maintaining semantic markup? I believe the best tag for this would be dl. Each cell should have the height of its corresponding row. EDIT: The left column contains d ...

htmlcssxhtmlsemantic-markup

Certain divs have an opacity of zero while others do not

Currently in the process of creating a bootstrap template, which is being hosted at this link: Encountering a peculiar bug where the title spice road seems to be blocking the lorem ipsum text, yet is allowing the text in the gray jumbotron div to show thr ...

htmlcsstwitter-bootstrapbootstrap-4

Parse and style particular text within a DIV element

A unique text inside a div: Welcome to the world of coding. This is where creativity meets logic. Lines of code come together beautifully. Creating amazing projects is our goal. Mission: I aim to develop a script that will: Turn all instances of " ...

jquerycsshtml

Is it impossible to utilize Cordova Android on a Windows operating system?

After struggling for hours, I made the decision to go back and thoroughly read through the entire cordova documentation. During this process, I made an interesting discovery. According to the documentation, in order to add support or rebuild a project for ...

javascriptandroidhtmlcordova

Programmatically changing the stylesheet does not seem to be working to apply the

I'm currently working on a feature that allows the User to customize the application's style. Index.html <!DOCTYPE html> <html> <head> <link id="style" rel="stylesheet" type="text/css" href="red-stylesheet.css" ...

javascriptcss

The glyphicons in Bootstrap are not appearing

My angular app is built using bulp angular and the component. I incorporate Sass (Node) into the project. I decided to switch to the flatly theme, which I downloaded from the bootswatch website and inserted it into _bootstrap.scss. // Core variables a ...

javascriptcssangularjstwitter-bootstrap-3sass

Positioning bar chart columns and text using CSS

My component generates HTML for a simple bar chart, with the height and background color computed within the component. Everything functions correctly, but I am facing an issue where long text causes displacement of the bar above it. Another problem is th ...

htmlcssgraphicstailwind-cssvisualization