Unable to eliminate italicized text within collapsible content

Despite having no programming experience, I am attempting to create a FAQ section for our help site using collapsible sections for the Q&A. While I've managed to achieve most of what I wanted, there is one element that stubbornly refuses to change. Despite searching for the issue in the code, I can't seem to find a solution. Any assistance would be greatly appreciated. As a complete newbie in this area, I am in need of guidance x

The HTML code I have implemented is:


<link rel="stylesheet" type="text/css" href="https://content.ilabsolutions.com/wp-content/uploads/2020/05/gradifi.css" media="screen">

<div class="wrap-collabsible">
    <input id="collapsible" class="toggle" type="checkbox" value="on">
    <label class="lbl-toggle" for="collapsible">Question?</label>
    <div class="collapsible-content">
        <div class="content-inner">
            <p>Answer.</p>
        </div></div></div>
</html>




input[type='checkbox'] {
    display: none;
}

.wrap-collabsible {
    font-style: normal;
    line-height: normal;
}

.lbl-toggle {
    display: block;
    text-transform: none;
    text-align: left;
    width: 100%;
    font-family: arial, sans-serif;
    font-size: 1.2rem;
    font-style: normal;
    padding: 0.6rem;
    color: #ffff;
    background: linear-gradient(to right, #00A9E0, #0085D5);
    cursor: pointer;
    border-radius: 5px 5px 0px 0px;
    transition: all 0.25s ease-out;
}

.lbl-toggle:hover {
    color: #7C5A0B;
}

.lbl-toggle::before {
    content: ' ';
    display: inline-block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid currentColor;
    vertical-align: middle;
    margin-right: .7rem;
    transform: translateY(-2px);
    transition: transform .2s ease-out;
}

.collapsible-content .content-inner {
    background: linear-gradient(to right, #f7f7f7, #f5f5f5);
    border-bottom: 1px solid rgba(250, 250, 250);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: .5rem 1rem;
    border-radius: 0px 0px 5px 5px;
    font-family: arial, sans-serif;
}

.collapsible-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}

.toggle:checked+.lbl-toggle+.collapsible-content {
    max-height: 100%;
}

.toggle:checked+.lbl-toggle::before {
    transform: rotate(90deg) translateX(-3px);
}

.toggle:checked+.lbl-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

The browsers display it like this, with the blue box text in italic font.

Update:

I'm unsure if this is the correct way to provide a solution, but I've finally managed to resolve it.

In the section .lbl-toggle {, instead of using text-transform: none !important;, I switched to font-style: normal!important. This simple change worked! Thank you everyone!

htmlcss

Answer №1

Hey there William,

Feel free to test out this code and share the results with me, my friend. I really hope this can assist you in resolving the issue at hand, buddy!

input[type='checkbox'] {
    display: none;
}

.wrap-collabsible {
    font-style: normal;
    line-height: normal;
}

.lbl-toggle {
    display: block;
    text-transform: none !important;
    font-style: normal !important;
    text-align: left;
    width: 100%;
    font-family: arial, sans-serif;
    font-size: 1.2rem;
    font-style: normal;
    padding: 0.6rem;
    color: #ffff;
    background: linear-gradient(to right, #00A9E0, #0085D5);
    cursor: pointer;
    border-radius: 5px 5px 0px 0px;
    transition: all 0.25s ease-out;
}

.lbl-toggle:hover {
    color: #e3a514;
}

.lbl-toggle::before {
    content: ' ';
    display: inline-block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid currentColor;
    vertical-align: middle;
    margin-right: .7rem;
    font-style: normal !important;
    transform: translateY(-2px);
    transition: transform .2s ease-out;
}

.collapsible-content .content-inner {
    background: linear-gradient(to right, #f7f7f7, #f5f5f5);
    border-bottom: 1px solid rgba(250, 250, 250);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: .5rem 1rem;
    border-radius: 0px 0px 5px 5px;
    font-family: arial, sans-serif;
}

.collapsible-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}

.toggle:checked+.lbl-toggle+.collapsible-content {
    max-height: 100%;
}

.toggle:checked+.lbl-toggle::before {
    transform: rotate(90deg) translateX(-3px);
}

.toggle:checked+.lbl-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
<html>
<head>
  <title>No</title>
  <link rel="stylesheet" type="text/css" href="https://content.ilabsolutions.com/wp-content/uploads/2020/05/gradifi.css" media="screen">
</head>

<body>
<div class="wrap-collabsible">
    <input id="collapsible" class="toggle" type="checkbox" value="on">
    <label class="lbl-toggle" for="collapsible">Question?</label>
    <div class="collapsible-content">
        <div class="content-inner">
            <p>Answer.</p>
        </div></div></div>
</body>

</html>

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

In Firefox, the content within the div element does not respect the maximum width set

My lengthy code won't wrap properly inside the td and div elements. It works fine in Chrome, but Firefox isn't cooperating. Any tips on how to fix this issue? I'm also open to other suggestions for improving my code (e.g. "reduce your use of ...

htmlcss

Ways to eliminate the default margin surrounding an image within a div

Struggling with CSS while building websites is a common issue for me. In my current project, I have encountered a challenge where I placed two images inside a div container. Oddly enough, when I add text to the div, it adjusts its height accordingly. How ...

htmlcssimage

What could be the reason for <input type="email"> flagging legitimate email addresses as invalid?

According to information from Wikipedia, the following email addresses are considered valid. " "@example.org "john..doe"@example.org "very.(),:;<>[]\".VERY.\"very@\\ \"very\". ...

htmlemail-validationhtml-input

Activating Button within Featherlight Modal

This is a follow up question from Featherlight hide div on Close After successfully resolving the issue with opening the lightbox, I have encountered another problem. I have added a submit button that should trigger an on('submit', function) whe ...

javascriptjqueryhtmlajaxlightbox

Obtaining a single element from a hidden display while dragging using Jquery UI

Is there a way to move an element outside of a container with overflow hidden when using drag and drop functionality in CSS? Currently, when I drag an element with the "item" class, it stays within the confines of the container with overflow set to hidden. ...

jquerycssjquery-uioverflowdraggable

Creating a search form in Bootstrap 4 that is centered and expands to full width only on small screens

I'm currently working with a bootstrap v.4 navbar that has 3 elements in it. I've managed to align the elements evenly so that the search bar is centered in the navbar. However, when it collapses it takes up the full width of the screen. Here is ...

htmlcsstwitter-bootstrap

Ways to eliminate spacing from a bullet point in a list?

Is there a way to eliminate indentation from ul? I attempted adjusting margin, padding, and text-indent to 0, but with no success. It appears that setting text-indent to a negative value works - but is this the only solution for removing the indentation? ...

htmlcss

Modification of a CSS element

The CSS I am working with looks like this: .cls .imageX { float:left; } .cls .imageY { float:right; } It is currently being used on a page in this way: <div class="cls"> <a href="" class="imageX"><img src="left.png"/></a> &l ...

javascriptjqueryhtmlcss

`Jump-start Your Development with jQuery Lightbox Centering`

Recently, I implemented a lightbox effect for images on my website. However, I encountered an issue where the lightbox was not centering properly in the window upon initial click. Instead, the lightbox would appear at the bottom of the page on the first cl ...

javascriptjqueryhtmlcssjquery-ui

Customizing the appearance of an HTML element using user-input text styling

On my webpage, there are two text areas and a division. One of the text areas is meant for users to input HTML code, while the other is for CSS code. Whenever a button is clicked, a JavaScript function will be triggered to display the combined HTML and CSS ...

javascripthtmlcss

What steps should I take to modify the URL using the SELECT tag?

Having a bunch of SELECT tags in place <select id="url"> <option id="url1" >url 1</option> <option id="url2" >url 2</option> </select> <button onclick="go()">GO</button> Followed by the associated scrip ...

javascriptjqueryhtmlajax

Convert JavaScript code to Google Appscript

Looking for guidance on incorporating Javascript code into my Google Appscript. Here is the code snippet: I have a separate Stylesheet.html file saved. Can someone advise me on how to invoke the functions within the html file? <script> //google. ...

javascripthtmljquerycssgoogle-apps-script

Creating a CSS Box Along the Border of Another Box: A Step-by-Step Guide

Is there a way to render a box on another box's border, similar to the example image here: Expected Output I attempted using flexbox to achieve this, but unfortunately wasn't successful in finding a solution. If you have any advice or suggestio ...

htmlcssflexboxfrontend

The problem with "em" in CSS: preventing it from scaling based on the font-size of a particular element

My website predominantly utilizes "em" for design over "px," which is meant to be more compatible with modern browsers. Most of the text is set at font-size:1em, where 1em equals 16px as a default without specific specification. However, there are sectio ...

cssfont-size

Having trouble locating and scrolling through elements while webscraping with Python Selenium, encountering the 'cannot focus element' error

I have been trying to extract ticket information from the VividSeats website. The URL I am working with is '' My tools of choice are Selenium and Python. I managed to navigate to the page using Chrome WebDriver and interact with the pop-up tha ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Displaying selected list item while concealing the original

I have a dropdown menu with several options. What I am looking for is to have it so that when we click on the drop down, a list of choices appears. Then, when we select an option from the dropdown, the original selection should be replaced with the one th ...

javascriptjqueryhtmlcss

Block of white colors located on the right side beyond the confines of an HTML structure

I am encountering an issue where a white block is appearing outside the HTML on my page. Despite having no content, Firebug indicates that it is located outside the html tag. I suspect the problem may be related to an image that is too wide or padding exc ...

htmlcss

Toggle css comment line using gulp

Is it possible to temporarily deactivate a particular CSS comment on a specific line using Gulp and then reactivate it after completing a build task? As an illustration, I am interested in deactivating the @import 'compass/reset'; statement loca ...

cssnode.jsnpmgulpcompass

Activate a button upon the user clicking the Enter key

Is there a way to automatically trigger a button click when the user presses the Enter key inside an input field? I've attempted to achieve this functionality, but have been unsuccessful so far. Here is my code snippet: <!DOCTYPE htm ...

javascripthtml

Enhancing the Appearance of WooCommerce Product Descriptions

Having some trouble with my website . There are two descriptions on the "Product" page - one above the tabs and one inside the tabs. Trying to change the text color in the tab section to black, but when I adjust the body text color it affects both areas. I ...

htmlcsswordpresswoocommercestyling