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

Subject: Enhancing Page Filters with jQuery Multiple Checkboxes

Here I am continuing the discussion from a previous question on jQuery Multiple Checkbox Page Filter. This is my own unique question. My objectives are threefold: I aim to create a list of checkboxes for filtering page content. I want only the content t ...

jqueryajaxcheckboxfilter

Tips for efficiently updating state in React.js dynamically?

Is there a way to dynamically update the state of CurrentIndex whenever a user is selected? Currently, it is hardcoded to 0 but I would like to change that. I need the currentIndex to be updated whenever a user from the list is clicked. The SidePan ...

javascriptnode.jsreactjs

Grant the "User" the ability to modify both images and prices

I'm currently working on an art website for a relative and I am looking to provide them with the ability to log in and easily update the images of their paintings as well as adjust the pricing. Is it possible to enable this functionality? My assumptio ...

javascriptphphtml

Authenticating Users with Laravel and Vue.js

In my Vue.js application, I have implemented a login system. The main script in my main.js file includes the necessary imports and configurations: import Vue from 'vue'; import NProgress from 'nprogress'; import Resource from 'vue ...

javascriptphplaravelauthenticationvue.js

Placeholder disappears when text color is changed

I have been struggling for 3 hours trying to change the placeholder color to graytext, but it's just not working. Here is the code I've been using: <div class="form-group"> <label for="email">Email:</label ...

htmlcssbootstrap-4

Modify the class of an input while typing using Jquery

Recently, I created a form using Bootstrap 4. The validation process is done through a PHP file with an AJAX call and it's functioning correctly, except for one issue. I want the input class to switch from "invalid" to "valid" as soon as the user begi ...

javascriptphpjqueryajaxbootstrap-4

Extracting user login details from a Java script-based web browser for a RASA chatbot

Our website integrates a web bot using Javascript. When users log in, they can access the chatbot icon. Currently, the chatbot starts without collecting user data. However, having user data is important as we plan to trigger actions based on user ID. If ...

javascriptpythonangularjschatbotrasa

reveal.js: Upon a fresh installation, an error has been encountered: ReferenceError - 'navigator'

Currently, I am attempting to integrate reveal.js into my React.js/Next.js website using the instructions provided at However, upon implementation, I encountered the following error: Server Error ReferenceError: navigator is not defined This error occurr ...

javascriptreactjsnext.jsreveal.js

Is it possible to arrange a react map based on the length of strings?

I am working on a React function that loops through an object and creates buttons with text strings retrieved from the map. I want to display the text strings in order of their length. Below is the code snippet for the function that generates the buttons: ...

javascriptarraysreactjssortingmaterial-ui

Implementing RXJS subscription using a Subject object

What is the benefit of using "Subscribe providing subject" and what does this entail: 1- The purpose of using subscribe providing subject import { Subject, from } from 'rxjs'; const newSubject = new Subject<number>(); newSubject.subscr ...

javascriptrxjs

What is the best way to retrieve the value of an UL LI element using jQuery

I'm struggling to retrieve the value of a ul li listbox in a function, and I can't seem to figure out how. Here is my code: <ul class="dropdown-menu" id="newloc"> <?php $res_add = DB::table('res_br')-& ...

javascriptphpjquery

"Using the power of jQuery to enhance the loading of Google Chrome

When attempting to load jQuery in the manifest's content_scripts, I encounter an issue where a dropdown stops working on a page that already has jQuery loaded. Despite checking the console log for errors, I am unable to pinpoint the issue. Removing jQ ...

jquerygoogle-chromegoogle-chrome-extension

Creating a new variable and then trying to access its value (which has not been defined)

I'm encountering an issue while trying to define a const variable called filteredRecipes and use it to setState. The problem is that the console is showing an error message saying that filteredRecipes is undefined, Uncaught ReferenceError: filteredRe ...

javascriptreactjsapifiltersetstate

Creating a Mondrian-inspired design using a combination of red, blue, and yellow within an HTML table

Is there anyone who can assist me in recreating this painting using HTML <table> tag and CSS within a browser? The image to replicate: https://i.stack.imgur.com/84y4I.jpg I attempted to complete this task, but my instructor is dissatisfied with th ...

htmlcss

Vue.js component communication issue causing rendering problems

When it comes to the Parent component, I have this snippet of code: <todo-item v-for="(todo, index) in todos" :key="todo.id" :todo="todo" :index="index"> </todo-item> This piece simply loops through the todos array, retrieves each todo obj ...

javascripthtmlvue.jsvuejs2vue-component

What is the optimal unit to employ in CSS - percentages or pixels?

As someone who is not well-versed in CSS, I strive to create a design that will appear visually appealing across all browsers and screen resolutions. I have observed that certain websites construct their designs using percentages for properties like width, ...

cssresolution

How can you gather user data on a website without relying on a database and making it voluntary?

In order to streamline the process, the user should be able to send a preformatted email with the click of a button or have their data stored securely without leaving the site. The goal is to avoid the extra step of using a mailto: link, unless the email c ...

javascripthtmlcssweb

`Using Twitter Bootstrap in mobile app development with javascript`

I have been utilizing Twitter Bootstrap 2.3 on one of my websites and I appreciate its responsiveness and use of media queries for mobile devices. However, I have noticed a lack of mobile-specific features, particularly linked listviews. In order to addres ...

javascriptjqueryjquery-mobiletwitter-bootstrapiui

AngularJS Data Binding Issue - Watch cycle fails to trigger

View the JSFiddle example here: https://jsfiddle.net/pmgq00fm/1/ I am trying to achieve real-time updating of my NVD3 chart by utilizing the setInterval() function on line 39, which updates the data bound to the directive. Here is a brief overview of the ...

javascriptangularjsd3.jsnvd3.js

How can we consolidate an excess of menu items into a condensed, collapsed menu?

I have a navigation bar displaying category items, but if the menu items exceed the navbar width, how can I condense them into a drop-down menu using Bootstrap 3.0? Currently, my navbar only shows 10 items due to limited space. However, I have more items ...

htmlcsstwitter-bootstrap