Show a div depending on user input

For those with more programming experience than myself, I have a simple question. In Rails, using coffescript, I want to show additional content based on a user's selection. Essentially, if they click on a checkbox, it should reveal an extra field for them to complete; otherwise, it should remain hidden.

Currently, my page renders without any errors, but the div is not initially hidden as expected (I assumed the CSS would handle this) and clicking the checkbox does not trigger any change in state.

Below is my View (_form.html.erb):

<div id="po_state">
    <%= f.label :is_holiday %><br>
      <%= f.check_box :is_holiday %>
    <div id="addStuff">
          <div class="field">        
          <%= f.label :add_stuff %><br>
          <%= f.text_area :add_stuff %> </div>
    </div>
  </div>

Here is my CSS (holidays.css.scss):

#addStuff {
display: none;
}

And my coffeeScript (holidays.js.coffee):

showM = ->
  as.style.display = "block"
  return

m = document.getElementById("po_state")

as = document.getElementById("addStuff")

m.onclick = showM

I attempted a different approach with my coffeeScript. Unfortunately, no success yet.

$("#po_state").change ->
  $("#addStuff").toggle @checked
  return

Answer №1

Success! I decided to stick with jQuery for the time being:

$(document).ready(function(){
    $("#po_state").click (function() {
  $("#addStuff").toggle( "bounce", 1000 );
    return false;
});
});

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

Seeking animated SVGs using CSS styling

I've been trying to animate my SVG icon, but I seem to be missing something. I'm still fairly new to CSS animations. The issue I'm facing is that the position of the SVG isn't correct when the website loads. Additionally, during the an ...

Implementing automatic activation of a tab upon page load using Angular

I am currently working with a set of Bootstrap nav pills in my navigation bar. The 'ng-init' code in my Angular script sets the 'dateState' to 'past' on page load. However, I have noticed that the 'Past Events' nav p ...

accordions that are supposed to adapt to different screen sizes are

My custom responsive accordions are not functioning as expected. The requirement is to display headings and content for desktop view, but switch to accordions on smaller devices. I have managed to do this, however, when resizing the window, the functionali ...

Steps to insert a Drop-Down Sub-Menu

I'm just about finished with my navigation panel. Any tips on how to add a sub-menu? I currently have one in the Product page. Below is the HTML code containing the sub-menus: <nav> <ul> <li><a href="">HOME</a>&l ...

Baffling Visibility Issue: iframe's Transparency Lost in Chrome and IE, Only Visible in Firefox

I have encountered a puzzling issue: http://jsfiddle.net/akosk/t2KvE/8/ HTML <div id='base'> <iframe id="myFrame" src="about:blank" frameborder="0" allowTransparency="true"></iframe> </div> <script id="conte ...

The full screen menu is exclusively displayed in the navigation bar

My HTML and CSS code is causing an issue where the full-screen menu only appears in the nav bar. This problem seems to be specific to Safari. To solve the issue, I need to remove the following code: .nav { position: fixed; } However, I still ...

Adjusting the color of an HTML slider button as it moves

In my setup, I have a straightforward slider that I plan to use for controlling the movement of a stepper motor based on the slider's position. I wanted to give the website where this will be hosted a professional look, so I've spent quite some t ...

How to insert an SVG into a <span> element using jQuery's find() method

I am encountering challenges when trying to select an svg element (originally written as img and later converted to svg using jQuery). Here is the code snippet: HTML: <div class="tab-content"> <div id="personas" class="active"> <s ...

Conceal a div containing certain content using jQuery

Can you use jquery to hide a div with the class "one" if it contains the following content? <div class="one"> <div style="padding:20px;"> <div class="title"></div> <div class="content"></div> < ...

Comparison between JSON Serializers and .NET Serialized Classes for Retrieving jQuery AJAX Result Data

What is the best method for transferring data from a .NET (C#, VB.NET) Web Service to the client-side using JQuery AJAX? A) Utilizing Newtonsoft JSON serialization, for example: <WebInvoke(Method:="*", ResponseFormat:=WebMessageFormat.Json, UriTemplat ...

I am having trouble receiving responses when using mentionsInput in my Laravel project

Why am I not receiving any response while using the mentionsInput feature in my Laravel project? The data is correctly coming in JSON format, which I have verified. $(document).ready(function() { var token = $("#csrf-token").val(); $("textarea.menti ...

The properties of the NextFont variable cannot be utilized in the CSS global scope when using the var() function

// font.ts file import { Quicksand, Syncopate } from 'next/font/google'; export const quickSandRegular = Quicksand({ subsets: ['latin'], variable: '--font-quicksand-reg', weight: '400', display: 'swap& ...

Displaying a mouse cursor using an A-frame function

I am presently working on a scene using A-frame () in which I have hidden the mouse pointer. Is there a way for me to set it up so that when a specific function is triggered, the mouse pointer will show, and when another function is executed, the mouse poi ...

Troubleshooting issues with the Bootstrap dropdown menu

I am struggling to get a dropdown menu working properly with Bootstrap. Despite looking through similar questions on this forum, I have not yet found a solution that works for me. Below is the HTML head section of my code: <!DOCTYPE html PUBLIC '- ...

The alignment of the image background is malfunctioning on the iPad 3 device

Hey there, I need some assistance resolving an issue with a header background image on iPad3. The problem is that the image is not displaying correctly on iPad3 browsers, even though it works fine on desktop browsers. Below you can find my CSS and HTML cod ...

Text box size in user input not adapting on mobile devices

Website: Visit the Cutter Travel Calculator here I've encountered an issue with my user input text boxes on mobile. Despite setting their width using the formidable forms plugin, the size adjustment doesn't seem to apply when viewed on mobile de ...

What issue is arising from nesting jQuery for loops within another loop?

There seems to be an issue with wrapping the two "for loops" inside the first loop, although they work fine individually. Is there anyone who can point out what's wrong with them? jQuery('#rooms').change(function () { for (var a = 1; ...

Transmit JSON information to PHP and leverage it for interactions with MySQL database

I am trying to copy all selected rows from the FIRST table and insert them into the SECOND table. In JSON, I am sending the event type (insert or delete) and an array of IDs for the rows to copy. How can I access this JSON data in a PHP file? JS: var da ...

Div with full height will not have scrollbars

As I work on developing a chat site, I've come across a peculiar issue with the chat display feature. Currently, my jQuery code dynamically adds chat rows to a div. My goal is to set the height of this div to 100% so that it adjusts based on the user& ...

Issue encountered with Tailwind Color Classes not functioning correctly when triggered by a button click within NextJS and React Vite framework

Recently, I've developed a component showcasing the "Text Gradient" effect in Tailwind + React. The component comprises of 4 select dropdowns and a "randomize" button. Upon clicking the button or selecting an option from the dropdowns, the changes are ...