Is there a barrier I've reached with the amount of hashtags I'm using?

My goal is to limit the use of javascript and rely more on CSS to achieve desired effects on my website. One feature I have developed is a modal that opens using hashtags and targets, similar to this example: http://codepen.io/maccadb7/pen/nbHEg.

While the modal function works as intended, I now want to add a CSS-only tab control inside the modal div. Most methods I've come across involve the use of hashtags and targets, which I've already implemented for the modal. However, having multiple hashtags in the URL is not feasible. Does this mean I have no option but to resort to using javascript?

javascripthtmlcssdomhashtag

Answer №1

One alternative approach is to create a relatively positioned box that contains absolutely positioned tabs along with inline radio inputs. Use the + selector to toggle the visibility of the tabs.

<div class="tabbox">
    <label for="tab1">A</label>
    <input id="tab1" type="radio" name="tab" class="tabchoice" />
    <div class="tabcontent">hello</div>
    <label for="tab2">B</label>
    <input id="tab2" type="radio" name="tab" class="tabchoice" />
    <div class="tabcontent">world</div>
</div>

.tabbox {
    position: relative;
}
.tabcontent {
    position: absolute;
    top: 20px;
    left: 0;
    display: none;
}
.tabchoice:checked + .tabcontent {
    display:block;
}

SEE DEMO

Additional adjustments may be necessary for handling overflows in a production environment.

Answer №2

Utilize radio buttons and CSS to design a tab control without using JavaScript.

<div id="content">
<label class="what-tab" for="what-tab">What is </label>
<label class="example-tab" for="example-tab">Examples</label>
<input type="radio" name="tab" id="example-tab"/>
<input type="radio" name="tab" id="what-tab" checked=""/>
<div id="group">
<div id="what">What</div>
<div id="example">Example</div>
</div>
</div>

#content label{
width: 150px;
height: 25px;
display: block;
float: left;
text-align: center;
line-height: 25px;
}
#content label:hover{
color: white;
}
[name=tab]{
position: absolute;
visibility: hidden;
}
.what-tab{
background-color: green;
}
.example-tab
{
background-color: blue;
}
#group{
clear: left;
position: relative;
height: 525px;
}
#group > div{
position: absolute;
height: 500px;
width: 100%;
opacity: 0;
padding: 10px;
overflow: auto;
z-index: 1;
}
#what{
border: solid 1px blue;
}
#example{
border: solid 1px green;
}
#example > label{
background-color: green;
}
#example > div{
font-size: 18px;
padding: 5px;
display:none;
clear:both;
}
#example-tab:checked ~ #group #example{
opacity: 1;
z-index: 2;
}
#what-tab:checked ~ #group #what{
opacity: 1;
z-index: 2;
}
input[name="eg-tab"]{
display:none;
}
input + div{
clear:both;
}

http://jsfiddle.net/FPD58/2/

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

Dynamically loading a JSON file in JavaScript

Can you please review this code snippet? var scripts = {}; require = function(src){ var id = Math.round(+new Date()/1000); $.ajax({ url: src + '.json', type: 'GET', dataType: "json", cache: ...

javascriptjsonjquery

Adjust image size while maintaining aspect ratio

Currently, I am implementing a resize function for an image by using the following code snippet: $('.image_resize').each(function(){ var ww = $(window).width() - 80 - 400; var wh = $(window).height() - 60; var iar = $(this).attr(&apo ...

javascriptjqueryhtml

How can React and react-router be used to direct users to a specific group of URLs

One scenario I have is when my users upload a group of photos, they need to add specific meta information for each one. After uploading the files, I want to direct them to the first photo's meta editor page. Then, when they click on the "next" button, ...

javascriptreactjsreduxreact-router

Issue with array push not working within nested Promise

I recently encountered an issue with my Express API route that retrieves an artist's details along with an array of releases for that artist. My current goal is to iterate over this array, extract each URL, and then make additional API calls to retri ...

javascriptarraysexpresses6-promiserequest-promise

Having trouble sending a JSON object from Typescript to a Web API endpoint via POST request

When attempting to pass a JSON Object from a TypeScript POST call to a Web API method, I have encountered an issue. Fiddler indicates that the object has been successfully converted into JSON with the Content-Type set as 'application/JSON'. Howev ...

javascriptangulartypescriptasp.net-web-apiasp.net-web-api2

If an error occurs later in the function, `console.log` will not function properly

While debugging some code in Express.js using console.log statements, I encountered an issue where the console.log statements do not execute if there's an error in the function, even if that error occurs after the console.log statement. This behavior ...

javascriptnode.jsexpressconsole.log

The callback function in jQuery does not function properly in a custom class or object

Hello, I am new to the world of programming so bear with me if this question seems basic. I am currently working on creating a simple wave effect to give the illusion of moving water. Initially, I achieved this using a straightforward jQuery function which ...

javascriptjqueryclassobjectcallback

Please tap to dial: Access to navigation is restricted

Trying to add a click-to-call link with the following code: <a href="tel:+4912345678912">Tel: +4912345678912</a> Despite Google developers saying it should work, major mobile browsers are blocking the navigation when clicking on the link. It ...

javascripthtmlbrowsertel

Adjusting Table Width with Bootstrap Styling

https://i.sstatic.net/MIkw0.png Could someone please advise on how to adjust the width of the Bootstrap HTML table above? It appears to be spreading out across the entire browser screen. Thank you. # in this section, I inserted bootstrap into my html tab ...

htmlcsstwitter-bootstrapbootstrap-4

How to Ensure Center Column Maintains Visibility on Mobile Devices with Bootstrap 4

Is there a way to ensure that page content stays centered without looking too narrow when viewed on mobile devices? Specifically, in the context of a single column layout that is centered. Although the current design appears well-balanced and spaced out o ...

htmltwitter-bootstrapbootstrap-4

Ensure that the objection model aligns with the TypeScript interface requirements

I am currently working on implementing an API using express, objection.js, and TypeScript. I found a lot of inspiration from this repository: https://github.com/HappyZombies/brackette-alpha/tree/master/server/src Similar to the creator, I aim to have var ...

javascripttypescriptknex.jsobjection.js

Generate a Jade/Pug template using a JavaScript variable

I've been encountering some difficulties with Pug (Jade) recently. I'm passing an array from the backend to the frontend and then sorting it on the client side. Here's how it looks: potentials is the array of objects that I'm sending ...

javascriptnode.jsexpresspug

Tactics for postponing a js function post-click

I need to implement a delay after clicking a button to fetch some data. The code will be executed within the browser console. $(pages()) is used to retrieve the pagination buttons. let calls = []; for (let i = 1; i <= callPagesCount; i++) { ...

javascriptjquery

Tips for creating a hover effect on a rounded outline button with a gradient border

What I am looking for: I want the buttons to have rounded corners; The buttons should use linear-gradient, with button A as the border and button B as the background color; When hovering over the buttons, the opacity should change to 0.5. This works fine ...

css

Converting Typescript library into a standalone global JavaScript file

Currently working on developing a Typescript library that follows this structure: https://i.stack.imgur.com/YyCHk.jpg This includes the following files: restApi.class.ts import { restApiOptions } from '../models/rest.options.model'; import { ...

javascripttypescriptwebpacktsconfig

Generating an HTML table from information stored in a text file

As a beginner in web design, I am looking to create an HTML table using data from a text file. I'm unsure of the best approach to take, so any guidance or pointers would be greatly appreciated. ...

htmlweb

Tips for modifying the text color of radio button choices in HTML and CSS

I have set a black background image for my HTML page. How can I change the radio button labels/texts to white, similar to the questions? This is the code snippet that shows how it currently looks on the page: View Image <hr&g ...

htmlcssformsstylingtext-styling

Nothing happens when the render_template method receives AJAX content in Flask with Python and JavaScript

When a certain condition is met, I am using ajax to pass data to my python function: if (lesson.length === 0) { $.ajax( { type:'POST', contentType:'application/json& ...

javascriptpythonajaxwebflask

"Enhance your website forms with a Bootstrap typeahead feature for tagging using

I've encountered a roadblock while trying to transfer my functioning solution to my meteor app. The typeahead and tags input plugin work perfectly on my local PC, but when I migrate them to meteor.js, something breaks. I've made sure to include ...

javascriptjsontypeahead.js

Exploring object manipulation and generating unique identifiers by combining values - a beginner's guide

After analyzing the provided data, my goal is to come up with a method of combining the IDs and returning an array of their corresponding keys. // example data var data = [ { id: 1, key: 'a' }, { id: 1, key: 'b' }, { id: 2, key ...

javascriptnode.jsobjectreduce