Is it possible to display and conceal divs/sections by clicking on navigation bar buttons without utilizing javascript or JQuery?

As I work on coding a page for an assignment, I'm faced with the challenge of implementing a navigation bar with three sections: Business Plan, About Us, and Contact Us. While trying to incorporate clickable buttons using label and radio input elements, I encountered difficulty in making the buttons function properly without disrupting the CSS styling of the navbar.

I need guidance on how to achieve this functionality without compromising the layout. What am I missing in my approach?

This is the code snippet that I have been working on. My attempt to integrate the buttons within the div tags has led to undesirable outcomes, such as disrupting the layout by nesting elements incorrectly.

Although I managed to get close to the desired outcome, I ended up having two navbars where the visually appealing one did not function as intended.

For instance, clicking on "Business Plan" should reveal "Mission...", "Threats...", and other related elements as shown in this example.

Similarly, selecting "Location" should display the content illustrated in this example.

Here are the HTML and CSS snippets:

htmlcssnavbar

Answer №1

To target specific sections based on checkbox selection using the :has() selector in CSS, you can use the following example code snippet. This code allows you to show or hide content within certain sections when checkboxes are checked. Check out the full page for a live demo.

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

*,
*:after,
*:before {
    box-sizing: border-box;
}

/* Rest of the CSS styling goes here */

.header-navigation:has(#about-us:checked) #missao {  /* this is an example */
  display:none
}

.header-navigation:has(#business-plan:checked) #ameacas_oportunidades{  /*this is an example added*/
  display:none
}
  <div class="banner-outer">
    <div class="banner-inner responsive-wrapper">
        <!-- Placeholder logo in SVG format -->
        <div class="logo-wrapper">
            <div class="white-square"></div>
            <div class="pastel-square"></div>
            <img src="logo.svg" class="logo fade-out" alt="Company Logo">
        </div>
        <!-- End of placeholder logo -->
    </div>
</div>
<header class="header-outer">
<div class="header-inner responsive-wrapper">
    <div class="header-logo">
        <img src="logo2.svg" />
    </div>
    <nav class="header-navigation">
        <a href="#missao">Plano de Negócios</a>
        <a href="#ameacas_oportunidades">Localização</a>
        <a href="#pontos_fracos">Contato</a>
    </nav>
</div>
</header>

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 is causing the failure of generating a DIV element with JQuery?

I'm having trouble creating a div element with a class and appending a child to it. I keep getting no response. What could be the issue? JS content function generateTable() { var procDiv = $("<div class='proc-container'></div>" ...

jqueryhtml

Manipulate input fields dynamically with JavaScript

I am currently working on a functionality that involves generating an alert button based on a selection from a drop-down menu. The JavaScript part of the code is able to successfully read and send the values from the <select> drop-down as intended. H ...

javascripthtmldom

Troubleshooting the Problem with CSS Margin in HTML Footer

I'm encountering an issue with the footer on my website. The margin: auto; command doesn't seem to be working for the list items in the footer. I want the items in the footer to occupy one-third of the width, but no matter where I place the marg ...

htmlcssmarginfooterlistitem

The jQuery function is not functioning correctly

Currently, I am in the process of setting up an accordion menu using jQuery and CSS3. Everything is working perfectly fine so far except that the menu always opens upon page load and the code to hide it is not functioning as intended. Here's the link ...

jquerycss

Using jQuery to smoothly animate a sliding box horizontally

Is there a way to smoothly slide a div left and right using jQuery animation? I have been trying to achieve this by implementing the code below, which can be found in this fiddle. The issue I am facing is that every time I click on the left or right butto ...

javascriptjqueryhtmlcssjquery-animate

`javascript pop up notification will only display one time`

I am currently developing a chrome extension with two different modes. When the user clicks on the icon, a pop-up message should appear to indicate which mode is active. However, I am facing an issue where the message does not always display when the pop- ...

javascripthtmlgoogle-chrome-extensionpopup

Flexbox that adjusts to any browser height, ensuring full responsiveness

I am exploring the world of flexbox with the goal of creating a responsive layout consisting of 3 items that adjust seamlessly to different devices such as smartphones, tablets, and desktop computers. The layout should stack the items on top of each other ...

htmlcssflexboxresponsive-design

Adjusting font sizes in JavaScript causes the text to resize

Within my HTML pages, I am adjusting the font size using JavaScript code like this: "document.body.style.fontSize = 100/50/20" However, whenever the font size changes, the text content on the page moves up or down accordingly. This can be disorienting for ...

javascripthtmlcssdomuiwebview

Align text vertically next to an image

I am facing a challenge with aligning text vertically next to an image floated left. I have tried various solutions recommended on different platforms, but none seem to work for me. Despite following the suggestions provided in this particular solution, I ...

htmlcss

Dragging a React <div> using useRef

As a beginner in React, I decided to challenge myself by recreating a classic game like 'space invader'. It seemed like a fun and simple project for someone at my skill level. My goal is to have a spaceship at the bottom of the screen that can s ...

cssreactjsuse-ref

Eliminate the Border from Bootstrap 5 navigation-toggler through standard css styling

I am trying to eliminate the light grey border around the mobile 'hamburger' menu. I am utilizing font-awesome and Bootstrap 5 (imported through CDN) to create it, but I can't figure out how to get rid of the rounded border. html <na ...

cssmenubootstrap-5

How can I retrieve the results of an SQLite call in HTML5 without passing them to a separate function?

How can I use SQLite in HTML5 to execute a call like the one below, so that the result is returned immediately rather than passed off to another function? try { mydb.transaction( function(transaction) { transaction.executeSql( &apo ...

javascriptsqlitehtml

Modifications to contenteditable elements result in a change to their IDs

Having some trouble with the behavior of a contenteditable div. The code structure is like this: <div contenteditable="true"> <p id="element-id-1">element-id-1</p> <p id="element-id-2">element-id-2</p> </div> E ...

javascriptjqueryhtmlcssdom

inadequately arranged in a line

In Bootstrap 4, I have created this form group that you can view in this fiddle: <div class="m-portlet__body"> <div class="form-group m-form__group row"> <label class="col-lg-2 col-form-label"> Email Address ...

cssbootstrap-4

Switching from HTML to BBCode during the editing process

My issue lies in converting BBCode to HTML and then editing the code on a page with AJAX. When editing in a <textarea>, the HTML tags show up instead of the original BBCode. For instance, if I submit [b]bold text[/b] and save it to my database, the ...

javascriptphphtmlajax

Tips for creating a more flexible HTML container and resizing the navbar for mobile devices

In my current HTML code, I have 3 "col-md-4" divs within a row, each with a container--wrap to fill the webpage with 3 equally sized containers. These divs are placed inside another div with class = container-fluid. When I resize the window, the containers ...

htmlcssbootstrap-4

Struggling to figure out the method for obtaining css selectors for scraping in scrapy

Struggling with scraping a website and figuring out how css selectors work in Scrapy. The css in question: https://ibb.co/eJeZpb Here are some standard css selectors: .css-truncate-target .message .js-navigation-open time-ago For scrapy, you would need ...

pythoncsspython-3.xscrapy

Ways to access the value of an input field using Javascript

I am currently utilizing the valums-file-uploader plugin for file uploads via ajax. However, I have encountered an issue with its functionality. Below is the script that I am using: <input type="text" id="Gaurav" name="Gaurav" /> <script src="fil ...

javascripthtmljquery

Unable to configure slick carousel to a 12-column grid in Bootstrap

When attempting to set my carousel to col-xs-12, the columns do not align correctly within the slick carousel in Bootstrap. If I change it to col-xs-6, it works fine but then two grids appear in one row. I require more space for my carousel. Could I be ov ...

jquerycsstwitter-bootstrap

Restrict the number of clicks allowed on a button

I am working on a project for my college where I need to restrict the number of times a button can be clicked to only 3 times. I have searched everywhere for code to achieve this and finally found some yesterday. The code is functioning partially as it giv ...

javascripthtml