Show or hide text when list item is clicked

This is the rundown of services

<div>
    <a href="#hig"><button class="tag-btn">High blood pressure  Diabetes</button></a>
    <a href="#hih"><button class="tag-btn">High cholesterol</button></a>
    <a href="#thy"><button class="tag-btn">Thyroid disorder screening</button></a>
    <a href="#car"><button class="tag-btn">Cardiovascular risk assessment</button></a>
    <a href="#can"><button class="tag-btn">Cancer screenings</button></a>
    <a href="#bre"><button class="tag-btn">Breast screening</button></a>
    <a href="#lun"><button class="tag-btn">Lung screening</button></a>
    <a href="#col"><button class="tag-btn">Colon screening  Cervical screening</button></a>
    <a href="#pro"><button class="tag-btn">Prostate screening</button></a>
    <a href="#add"><button class="tag-btn">Addiction screening</button></a> 
</div>

These are the corresponding service sections


<div class="serv-text fl-wrap one" id="hig">
b
</div>
<div class="serv-text fl-wrap one" id="hih">
c
</div>
<div class="serv-text fl-wrap one" id="thy">
d
</div>
<div class="serv-text fl-wrap one" id="car">
e
</div>
<div class="serv-text fl-wrap one" id="can">
f
</div>
<div class="serv-text fl-wrap one" id="bre">
g
</div>
<div class="serv-text fl-wrap one" id="lun">
h
</div>
<div class="serv-text fl-wrap one" id="col">
e
</div>
<div class="serv-text fl-wrap one" id="pro">
j
</div>
<div class="serv-text fl-wrap one" id="add">
k
</div>

And this is the CSS code snippet

#obs, #hig, #hih, #thy, #car, #can, #bre, #lun, #col, #pro, #add {
  display: none; 
}

#obs:target, #hig:target, #hih:target, #thy:target, #car:target, #can:target, #bre:target, #lun:target, #col:target, #pro:target, #add:target {
  display: block;
}

Although the above code works fine, I have a sticky header which causes the displayed service section to be obstructed under the header. This requires constant scrolling for the users.

Is there a more effective way to implement this considering the sticky header?

Maybe JavaScript could help but I'm unsure. Any suggestions?

Thanks for your assistance!

Answer №1

Is it possible that the header is covering up the divs you are trying to display? If so, one solution could be to simply add a top margin to the main div where you want the elements to appear, ensuring that the div starts below the header. Alternatively, you could consider reconfiguring your layout using a grid system like Bootstrap, which can automatically handle the arrangement of divs for you.

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

How can you use $_REQUEST in PHP to fetch an array of inputs for database insertion?

I have a webpage where I am utilizing AJAX to transfer inputs to a PHP file for database entry. The following is my JavaScript code: var pageLoaded = function () { var submitButton = document.getElementById("submit"); if (submitButton) { submitButton. ...

Modifying the image height in a column using Bootstrap and JSON data

My webpage is dynamically generating images from a JSON file through a JavaScript file. However, the images are displaying at different heights, and I want each column to adjust to the height of the image to eliminate any gaps. Particularly, data with the ...

Activate a CSS button upon clicking and update the content within the div

In order to achieve the desired result of having menu CSS buttons change the content of a div when clicked, I have managed to do that successfully. However, a problem arises when clicking on the 2nd or 3rd button/link - it changes the div content, but as s ...

angular table disabled based on condition

I have a table in my HTML file and I am trying to figure out how to disable the onClick function if the start date is greater than the current date. <ng-container matColumnDef="d"> <th mat-header-cell ...

Determine the preceding element in a table by utilizing jQuery

I currently have an HTML table with the following content: <table class='main'> <tr id='r1' class='tbl'> <td>V1</td> </tr> <tr id='r2' class='tbl'> <td>V2& ...

Could HTML code be inserted into the <Head> section of a NextJS page?

I need to add meta tags retrieved from the backend for a certain page to the Head section of my page component. In React, I know that I can incorporate HTML using <div dangerouslySetInnerHTML={{__html: response.someHtml}} />. Can this same method b ...

Switching between different elements in an array using React

I've got a collection of appointments and I need to create a React view that will show them one by one. Users should be able to navigate through the appointments using arrow buttons. Here's an example of what the data looks like: const arr = [ ...

The website does not support the zoom out or scrolling features on iOS devices

A portion of our website has been optimized for mobile devices, however, we have decided to direct iPhone users to the desktop version when accessing the Blogs section (all PHP content) at this time. While this functions properly on an iPad, we have encou ...

Issue with displaying multiple checkboxes using Materialize CSS in combination with Leaflet for web-mapping overlays

I'm currently using Materialize 0.97.7 along with Leaflet 1.0.1 (the latest version). <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet-src.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com ...

What is the process for animating classes instead of ids in CSS?

My webpage currently features a setup similar to this. function wiggle(){ var parent = document.getElementById("wiggle"); var string = parent.innerHTML; parent.innerHTML = ""; string.split(""); var i = 0, length = string.length; for (i; i ...

The Firebase function that reloads the auth currentUser is not refreshing properly within a Vue component

My function for updating the profile URL using the reload method is not reflecting changes in my computed property. Computed Property computed: { photoUrl: function() { return firebase.auth().currentUser.photoURL; }, } Function onFileC ...

My goal is to retrieve and print the duplicated values only once from an associative array

Given an associative array, I need to print all the department names without any repetitions. <h3>2. List out all department names</h3> <div class="all"> </div> Here is my JavaScript code: var employee=[{"firstName":"Zahir","last ...

Issues with `Float:left` not functioning as expected on a div with dynamically changing

I'm currently working on setting up a base div that I can easily duplicate whenever I need to add new content to my website. Here's how the initial HTML structure looks: <div class="post"> <p class="date">17/03/1014</p> <h1& ...

Difficulty in toggling on and off several form elements with JavaScript

Trying to control multiple form elements on an HTML page with JavaScript has presented a challenge for me. In my form, each row contains a checkbox that should enable/disable the elements on that row. The issue I'm facing is that only the first two f ...

Error in Javascript: Character class range is not in order

My regular expression (regex) seems to be incorrect: var domain = "google\.com\.br"; var reEmail = new RegExp("^([A-Za-z0-9_\-\.])+\@" + domain + "$"); I am trying to use this regex to validate an email address. Here is an exampl ...

Tips for choosing a specific quantity and adjusting its value

Just starting out with Ionic 3 and looking for some help with the code. Can anyone assist me in understanding how to change the value of an item in a shopping cart and have the subtotal reflect that change? cart.ts private _values1 = [" 1 ", "2", " 3 "," ...

Update the formatting of the dates in the dateRangePicker

Utilizing a dateRangePicker, I am receiving dates in the format "mm-dd-yyyy". Below is my HTML code: <input type="text" name="TextDate" value="10/24/1984" /> Here is the script being used: <script> $(function() { $(&apos ...

Embedded Javascript fails to function following an async postback triggered by an UpdatePanel

After embedding some JavaScript files in a server control, everything works fine. However, when the server control is placed within an ajax UpdatePanel, it ceases to function after an async postback triggered within the updatepanel. This is the code in th ...

Accessing information from a database table using Highchart and Ruby on Rails (ROR

I have a Ruby on Rails application that utilizes highcharts. I am currently working on enhancing it to display the amount of time spent on specific projects. To demonstrate what I am trying to achieve, I have created a JSFiddle example which can be found h ...

What could be the reason for the ReferenceError that is being thrown in this code, indicating that '

let number = 1; console.log(number); Feel free to execute this basic code snippet. You may encounter an issue: ReferenceError: test is not defined, even though the variable was declared. What could be causing this unexpected behavior? ...