Is there a way to dynamically toggle the visibility of a floating textarea between on and off?

I have my own blog website:

Essentially, what I am aiming for is

When a user clicks on the search button, a floating semi-transparent textarea window should appear inside the designated rectangle area (as shown in the image, that red orange rectangle). If the user clicks on search again, the textarea should disappear.

How do I accomplish this?

Here's what I have so far:

on my webpage

<input type="radio" id="radio3" name="radios" value="search">
<label for="radio3">Search</label>

in my script

if($(this).attr("id") == "radio3"){

}

I understand that I need to fill something in the empty brackets above to show or hide the textarea.

As a beginner in html5, how can I achieve this?

javascriptjqueryhtmlcss

Answer №1

If you're working with jQuery based on the code provided, you can easily toggle the state of your text panels using the following snippet:

$("#radio3").on("click",function(){
  $("#textbox").toggle();
});
.container {
  position: relative;
  width: 500px;
  height: 500px;
  background: black;
  color: white;
}
.textbox {
  display: none;
  position: absolute;
  top: 50px;
  left: 75px;
  background: white;
  opacity: 0.5;
  height: 300px;
  width: 300px;
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="container">
  <input type="radio" id="radio3" name="radios" value="search">
  <label for="radio3">Search</label>

  <div id="textbox" class="textbox">
    Use search to toggle this area. 
  </div>
</div>

To learn more about toggling elements with jQuery, check out http://api.jquery.com/toggle/.

You can also utilize CSS3 to add transparency to the text area. This feature is simple and widely supported. For more details, visit http://css-tricks.com/almanac/properties/o/opacity/.

The positioning of the textbox can be adjusted using CSS by setting it to position absolute and specifying top and left values to position it within its parent container.

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

Using AngularJS to fetch images from RSS feed description

I'm currently learning AngularJS by creating a simple RSS feed. I have successfully made a JSON request and fetched all the data including title, link, description, and images from the RSS feed I parsed. The code snippet for extracting images looks li ...

javascriptangularjsrss

Flip the Script: JQuery slideshow in reverse

Hey there, I've been tinkering with a JQuery slideshow and encountering an issue. All my images in the HTML are stacked on top of each other, and I attempted to modify the code so it starts with the last image. However, my attempts have not been succe ...

jquerycssslideshow

Why is it that when the form is submitted, the value becomes unclear?

This is a form with HTML and TypeScript code that I am working on. <form> <div class="form-group"> <input class="form-control" ([ngModel])="login" placeholder="Login" required> </div> <div class="form-group"> &l ...

htmlangulartypescript

Troubleshooting MySQL: Update Command Not Functioning

I've been encountering an issue with updating a row in my MySQL database using AJAX. Despite testing the query and parameters directly in the database successfully, the row does not update when submitted via AJAX. Here is how the markup and AJAX are ...

phpjquerymysqlajax

Is there a way in WebStorm to create a "virtual" folder for conveniently organizing and hiding config files, or perhaps a feature that allows for easily toggling visibility of certain files?

I have a strong dislike for having all my configuration files cluttering up the root directory. These files are usually set up at the beginning of a project and rarely need to be changed. While I can hide them in WebStorm, it becomes a hassle to unhide the ...

javascriptnpmsublimetextwebstormweb-frontend

Is there a way to efficiently import only a specific data array into a NextJs page without importing the entire component dynamically?

Hey there, I recently went through a tutorial that explained dynamic importing in Next.js (https://nextjs.org/docs/advanced-features/dynamic-import) and it worked perfectly for components. Now, I'm facing a situation where I need to fetch data dynami ...

javascriptdynamicnext.jsdynamic-import

Is it possible to update table cell content depending on selected option?

Displayed here is the select block: <form> <select id="select"> <option disabled selected value="choose"> CHOOSE </option> <option value="i2g" id="i ...

javascripthtmlcss

Exploring the possibilities of device orientation in combination with 3D transforms

Imagine a project that aims to create a cube with sides representing different geolocations. The cube's sides for east, west, up, ground, north, and south are meant to always point in their respective directions. To gather the necessary data, the proj ...

css3drotationfirefox-osdevice-orientation

Is it possible to modify the CSS styling of the file_field?

I am looking to customize the appearance of the file_field in CSS. Rather than displaying the default browse button, I would like to use a simpler upload button for file submission. What steps can I take to modify the CSS of the file_field and replace it ...

javascripthtmlruby-on-railscss

jsonAn error occurred while attempting to access the Spotify API, which resulted

Currently, I am working on acquiring an access Token through the Client Credentials Flow in the Spotify API. Below is the code snippet that I have been using: let oAuthOptions = { url: 'https://accounts.spotify.com/api/token', method: ' ...

javascriptjsonreactjsauthenticationecmascript-6

Retrieving the value of a specific property nested within a JSON object using basic JavaScript

Hey there! Thanks for taking the time to check out my question. I'm diving into JavaScript and I've hit a roadblock trying to solve this particular problem: I'm looking to extract the value of a property nested within a JSON object under a ...

javascriptjson

How to retrieve the button value in HTML

One of the HTML components I am working with is a button that looks like this: <button>Add to cart</button> My goal is to retrieve the text within the button, which in this case is "Add to cart." To achieve this, I need to extract this value ...

javascripthtml

What is the reason behind the immediate firing of the animate callback function when a CSS transition is present?

I am facing an issue where the callback function fires immediately, disregarding the linear ease type and defaulting to the swing ease in CSS transitions. Is there a way to ensure that the animate function works correctly with the transition? The reason fo ...

jquerycssjquery-animatecss-transitions

Why would you need multiple root handlers?

One interesting feature to note is that multiple callback functions can be used as middleware to handle a request. These callbacks can take on different forms - they could be in the form of a single function, an array of functions, or even a combination of ...

javascriptexpressroutes

When the value in a required input field is empty, the border is activated and the color is styled

Can you please explain this to me? Try running this code in Firefox: http://jsfiddle.net/eMa8y/24/ Here is the HTML: <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> ...

htmlcssinputborderrequired

Preserve the visibility of a text input form while the checkbox is selected

Within my HTML code, there is a form that includes a checkbox labeled "other." When this checkbox is selected, a textbox will appear. If the user types in text and submits the form, the textbox disappears, but the checkbox remains checked (as saved in loca ...

javascriptjqueryhtmlformssession-storage

Can you explain the functionality of the following Express router?

In the tutorial I am currently following, there are 2 router methods used to retrieve articles from the database. router.param('article', function(req, res, next, slug) { Article.findOne({ slug: slug}) .populate('author') .th ...

javascriptnode.jsexpress

Vue.js component mismatch in the layout

Attempting to set up a Vue application with vuetify while incorporating layouts. As a newcomer to Vue, I may have made some beginner errors. Here is the structure of my app: main.js // The Vue build version to load with the `import` command // (runtime- ...

javascriptvue.jsvue-routervuetify.js

creating a personalized tooltip for every item within a dynamically generated @html.dropdownfor control in mvc3

Currently, I am developing a web project using MVC 3 and Razor in C#. In my code, I have implemented @Html.DropDownListFor to dynamically display items. Now, I would like to add tooltips for each item displayed by @Html.DropDownListFor. Here is the relev ...

jqueryhtmlasp.net-mvctooltipdropdownlistfor

Exploring how to read class decorator files in a Node.js environment

I've developed a custom class decorator that extracts permissions for an Angular component. decorator.ts function extractPermissions(obj: { [key: 'read' | 'write' | 'update' | 'delete']: string }[]) { re ...

javascriptnode.jsangulartypescriptdecorator