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

The find function within $(this) is malfunctioning

I'm having issues with displaying/hiding content when clicking on a table row. Here is the simplified code snippet: HTML: <table> <tr onclick="showDetails()"> <td>Some text <br> <span class="hiddenC ...

javascriptjqueryhtmlcss

What is the most concise way to write this Xpath?

How can I retrieve the attribute value of an element using an absolute path like this: //*[@id="main"]/div[3]/div/div/div[3]/div[23]/div/div/div[1]/div/div/span/img I would like to know how to write code in relative xpath. Can you provide guidance on that ...

pythonhtmlselenium

How can I create editable text using typed.js?

How can I achieve the same text animation effect on my website as seen on the homepage of ? I want to utilize the library available at . Specifically, how do I stop the animation when the text is clicked, allowing users to input their own text? Below is ...

javascripthtmljquerycss

Populate the browser screen with a series of unpredictable numbers

I'm looking to fully populate the visible window of a webpage with random numbers. My current approach involves generating a long string of random digits first, and then applying the following properties to a div: #mydiv{ font-family: "Inconso ...

javascriptcss

Activate single elements one at a time

If you want to understand the question better, take a look at my code on jsfiddle. Each Div contains only one link. When you click on the link, it sets the Div to active and shows a hidden Div within it. Clicking the link again toggles the active style an ...

javascriptjqueryhtmlcss

Converting a string to regular text in JavaScript (specifically in ReactJS)

When I fetch data from an API, sometimes there are special characters involved. For example, the object returned may look like this: { question : "In which year did the British television series &quot;The Bill&quot; end?" } If I save t ...

javascripthtmlreactjsstring

Customize Your Chrome Experience: Inject an Element to Open a Hidden HTML Page within the Extension

I am currently working on a Chrome extension and I would like to add a link tag into an object, which will then direct the user to an about page stored within the extension itself. Is there a way to achieve this? Below is the code from my content.js file: ...

javascripthtmlgoogle-chrome

Select the radio button by hovering the mouse over it

Is there a way to check my radio buttons when hovering over them without having to click? I want to display photos based on the selected radio button. I attempted this using JQuery, but I am still learning and consider myself a beginner. ...

jqueryhtmlcss

Issue encountered when trying to import an image URL as a background in CSS using Webpack

I have been trying to add a background image to my section in my SCSS file. The linear gradient is meant to darken the image, and I'm confident that the URL is correct. background-image: url(../../assets/img/hero-bg.jpg), linear-gradient(r ...

javascripthtmlwebpacksass

Tips for keeping a div element at the top of the page

I am looking to have a div stick to the top of the page when someone scrolls down When the page is scrolled, the green div with class stickdiv should automatically stick to the top var left = document.getElementsByClassName("stickdiv"); for( var i = 0; ...

javascripthtmlcss

Is it possible to automatically set focus on the input box in an html tag multiple times instead of just once with autofocus?

Currently, I am developing an online editor that allows users to quickly edit individual words. My approach involves replacing specific words with input boxes containing the word for direct editing by users. In order to streamline the process and ensure e ...

javascripthtmlangular

When using Jsoup, make sure to nest the <div> tag within an <a>

As per the findings in this response: Referring to HTML 4.01 guidelines, <a> elements are limited to inline elements only. Since a <div> is a block element, it should not be placed within an <a>. However... In HTML5, <a> elements are all ...

htmlhtml-parsingjsoup

Bootstrap's inline form features a button on a separate line from the rest of the form

I grabbed this code directly from bootstrap's official documentation: <form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> <div class="inp ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Removing the border from a button in CSS and HTML

Looking to build a sleek and stunning website, but struggling with removing button borders. Any help would be greatly appreciated! If you'd like to check out the issue, visit this link: . I'm aiming for no button or image borders. To review my ...

htmlcss

Issues with CSS3 Animation failing to trigger upon hovering over links

Background: Looking to design a visually appealing hover effect for links in the future Current Demo Link: You can view the demo here specifically on Firefox Browser. body { color:#ffffff; font-family:"Helvetica"; font-size:12pt; backgr ...

htmlcsscss-animations

AngularJS Treeview with Vertical Line Styling using CSS

Struggling with styling, I am attempting to create a tree view in AngularJS. Currently, I am facing an issue aligning vertical and horizontal lines for the tree items. Check out my Codepen for reference. <html lang="en"> <head> <meta cha ...

cssangularjstreeview

KnockoutJS's data binding feature is failing to display any content within the table rows

My JavaScript function creates a model and applies it to an HTML document using knockoutJS. In the HTML file, I have two different ways of displaying the same data: 1- A select list (which is working fine) 2- A table (not showing the same data) I need a ...

javascripthtmlknockout.jskendo-mvvm

Steps for implementing remote modals in Bootstrap 5 using CS HTML

I'm attempting to implement a remote modal window in Bootstrap 5 with C# MVC. The endpoint for the modal partial view is configured correctly. According to this discussion on Github, all that needs to be done is to call some JavaScript. However, it ...

javascripthtmlbootstrap-5

A step-by-step guide on ensuring mandatory completion of all input fields prior to form submission

I'm new to JavaScript and I need some help. Currently, I am trying to implement input field validation using pure JavaScript for a form. However, I am facing an issue where the "Required" message only appears next to the last name input. What I want ...

javascripthtmlformsdom-events

Timer countdown: Looking for a countdown timer that will reset to 3:00 automatically each time it reaches 0 minutes, and can do so

Seeking a continuous countdown timer that starts from 03:00 and counts down to 0:00, then automatically resets back to 03:00, in an infinite loop. The condition is that no one should be able to manually stop this logic. After researching, I found a Ja ...

phpjquerymysqlangularjscss