Incorrect font displayed on Bootstrap button after inserting hyperlink

This section contains my HTML code snippet:

<div class="panel panel-default">
    <div class="panel-heading">
        Records
        <button type="button" class="btn btn-xs btn-success pull-right" id="command-add" data-row-id="1">
            <span class="glyphicon glyphicon-plus"></span> bla</button>
            <button type="button" class="btn btn-xs btn-info pull-right" id="command-import" data-row-id="1">
            <span class="glyphicon glyphicon-hdd"  href="javascript:void(0);" onclick="$('#importFrm').slideToggle();" </span> blu</button>
        <div class="clearfix"></div>
    </div>
    <div class="panel-body">
    <form action="script.php" method="post" enctype="multipart/form-data" id="importFrm">
                <input type="file" name="file" />
                <input type="submit" class="btn btn-primary" name="importSubmit" value="go!">
            </form>
    </div>
</div>
      </div>

Fiddle: https://jsfiddle.net/ddt3skr6/

Upon reviewing the code, I am seeking assistance in improving the appearance of the import button after it is clicked. Currently, the font style appears unattractive. Could someone provide guidance on how to resolve this issue?

Answer №1

Make sure to close your <span> tag after the button with id="command-import".

For your specific situation, you only need to slide it down. To achieve this, first slide it up and then, on click, you can slide it down.

To see a demonstration, please visit this demo link. Click the HDD icon "Datensätze importieren" to toggle.

Answer №2

This particular

<span class="glyphicon glyphicon-hdd"  href="javascript:void(0);" onclick="$('#importFrm').slideToggle();"
tag lacked a closing character >

Additionally, the final instance of the div in the last line serves no purpose.

See the Demo

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

Tips for obtaining unique identifiers in a "foreach" data binding to create a sortable accordion

Hey there! I'm looking to implement a sortable accordion (http://jqueryui.com/accordion/#sortable) in conjunction with the knockout-js "data-bind: foreach" loop. Each iteration of my loop will require a unique "id", but I'm unsure how to dynamic ...

Transferring data from AJAX form in JavaScript to PHP function

My website features a login form that sends data, such as email address, to a PHP function and initiates the creation of a user. I am looking to include additional information on the page where the form is located. Here is the data I want to include in t ...

Excessive image display | HTML and CSS synergize

I am having some trouble with my image gallery. Each image is displayed as a vertical column and has zooming effects when hovered over. Clicking on an image should show it in full screen with a caption. The problem arises when dealing with images that are ...

Determine the HTTP request method when capturing AJAX responses

As I take control of all AJAX responses on a global scale, I find myself searching for an elegant solution to identify the method (such as POST/PUT/GET) that was initially used to make the request triggering the intercepted response. Below is my approach ...

Track how long a webpage element remains in view using Seleniumwebdriver

After interacting with the page, a loader briefly appears and then disappears from the page html. <div class="loader"> <img src="/static/media/loading-anim-windmill.9f645983.gif" alt="loading"><p>Loading...&l ...

I am having trouble viewing an image on my screen

I am trying to add an icon to the left side of my "Skriv ut" text, but unfortunately it is not displaying correctly. This is how I want it to look: https://i.stack.imgur.com/6jcne.png Here is the code snippet I am using: <div class="col-md-4 col-md-o ...

Password Field Validation in React

<TextField id="outlined-basic" label="Password" variant="outlined" /> Can anyone assist me in implementing password validation using an onchange function? I am seeking help with the ...

Guide on converting a GraphQL request string into an object

Seeking assistance with intercepting and parsing GraphQL queries/mutations from a POST request body in an Apollo lambda server environment running on Node.js. The requests do not come in JSON format, but as GraphQL query language. I have been unable to fi ...

Having trouble getting the timer function to execute upon page load in JavaScript

My goal is to have my basic timer function activate when the page loads. However, I'm encountering issues with it not working as intended. I suspect there may be an error in the if else loop, possibly here: setTimeout(function(tag, sec), 1000);. How c ...

What causes the CSS class and jQuery to become unresponsive when rapidly moving the cursor over a specific selector while utilizing .hover(), .addClass() and .removeClass()?

After creating a customized h1 element, I implemented a feature where a class is added and removed from it with a smooth transition of 300ms when the mouse hovers over and off its parent DIV #logo. This was achieved using jQuery's .hover() method alon ...

What is the proper way to incorporate the "pdf" package into a TypeScript project?

I recently installed pdf and its types using the following command: npm install --save pdf @types/pdf However, I am struggling to find any documentation on how to actually use this package. When I try the following code: import {PDFJS} from 'pdf&ap ...

Delivering a Captivating JavaScript Pop-Up upon Page Loading

I have a simple pop up window (with no content) that triggers with the 'onclick' event. How can I modify the code below to make the popup appear automatically when the page loads? <head> <title>Popup Display</title> < ...

Saving an incremented number using Vue JS in Firebase database

I have a VueJS app integrated with Firebase JSON database where I'm trying to implement a feature that allows users to update the vote count of a comment by clicking an arrow (similar to upvotes on this website). The function works properly, but the V ...

The module 'AppModule' has unexpectedly declared a value of 'Component' that was not anticipated

Recently, I've been working on transitioning my application to the new angular2 webpack rc5 setup. I have successfully generated the app module using ng cli migration. However, I am facing an issue while trying to integrate a component from my own li ...

The functionality of Node.js middleware is not functioning correctly

My module contains Routes, and I want to verify access before allowing users to proceed. Within the Routes module, there are two routes and two access-check functions that I want to use as middlewares: const checkUser = (req, res, next) => { if (!us ...

managing arrays in JavaScript with multiple tables

**I have successfully written code for calculating the sum of inputs in one table** $('#example122').on('input', '.calculate', function () { calculateTotal(); }); function calculateTotal() { var grandTotal = 0; $ ...

Customize Your Wordpress Category Title with a Background Image

Within my wordpress template, there is a module known as new_boxs. The code snippet below shows that this module displays on the page six times, with two columns wide and three rows down: foreach($data_cat as $cat){ ?> <div class="span6"> ...

Tips for choosing the class=" * " using jQuery's .html() function

Is there a way to target the string "class" or any other specified string within code retrieved from .html()? If we have an element's HTML content stored in another element (similar to a snippet with preview) <div class="myClass">1</div> ...

What is the best way to retrieve content from an iframe with jquery?

I have added an iframe tag to my HTML page and am trying to conceal certain contents within that iframe. The content in the iframe is from a different origin. I attempted to use $("#iFrame").contents() but it is not functioning as expected. Could this be ...

Convert the button into text once the condition is met

I am currently utilizing the AppBar component from the material-ui library and have added a button. I would like to change this button to display just text within the AppBar, but I haven't been successful. Is there a way to transform the button in th ...