A guide on displaying containers with jQuery and CSS

Question

A guide on displaying containers with jQuery and CSS

Looking to create a smiley survey using only Front-End technologies.

Once a radio button is selected, the associated content should appear for comments. Currently, I have set up my CSS with display: none.

I attempted to implement this functionality using jQuery but haven't had success so far.

Appreciate any advice or suggestions you may have!

$("input[type='radio']").change(function(event) {
  var id = $(this).data('id');
  $('#' + id).addClass('face-cc').siblings().removeClass('none');
});

<div class="cc-selector row" id="moods">
  <div class="col">
    <input type="radio" type="radio" name="smile" value="angry" />
    <label class="face-cc" for="angry">
       <span class="far fa-angry" aria-hidden="div"></span>
     </label>
    <p>Terrible</p>
  </div>

  <div class="col">
    <input type="radio" name="smile" value="grin-stars"/>
    <label class="face-cc" for="grin-stars">
      <span class="far fa-grin-stars" aria-hidden="div"></span>
    </label>
    <p>Excellent</p>
  </div>
</div>

<div class="none" id="text">
  <div class="container">
    <form action="/action_page.php">
      <div class="row p-5">
        <div class="col-sm-12">
          <div class="form-group shadow-textarea">
            <label for="feedback">If you have any additional feedback, 
               please let us know below...
            </label>
            <textarea class="form-control p-2" id="comment" rows="7" 
              cols="20" placeholder="Comment here...">
            </textarea>
          </div>
          <button type="submit" class="btn btn-danger">
            Submit
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

javascript jquery css

Answer 1

Answer №1

Your approach has a few flaws that need addressing. Firstly, it is important to assign id attributes to the radio buttons in your HTML for easier identification of individual click events and value inspection. I have added some id's based on the existing name attribute of the radio buttons.

Secondly, I completely revamped the jQuery code to align with the addition of id attributes. This modification ensures that when a radio button is clicked, the script checks if its id matches the specified one, and then displays the corresponding element accordingly.

Show/hide functionality can also be achieved through CSS. Although I removed the display: none; CSS class for the above changes to take effect, you can retain it and utilize jQuery's toggleClass, addClass, and removeClass methods based on the implemented logic.

I simplified the logic further by incorporating a ternary operator, which provides a more concise syntax.

Last but not least, a quick search on platforms like StackOverflow can offer valuable insights. In fact, I came across an answer on StackOverflow (link) that precisely addresses the jQuery issue in your code. I took the time to explain my approach comprehensively because adjustments in both HTML and CSS were necessary in your case.

If you found this solution helpful, please consider 'accepting' or 'upvoting' it. Welcome to the Stack Overflow community!

var text = $('#text');
var showId = 'grin-stars';

$('input[type="radio"]').click(function() {
  $(this).attr('id') === showId ? text.show() : text.hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cc-selector row" id="moods">
  <div class="col">
    <input id="angry" type="radio" name="radioBtn" value="angry" />
    <label class="face-cc" for="angry">
       <span class="far fa-angry" aria-hidden="div"></span>
     </label>
    <p>Terrible</p>
  </div>

  <div class="col">
    <input id="grin-stars" type="radio" name="radioBtn" value="grin-stars"/>
    <label class="face-cc" for="grin-stars">
      <span class="far fa-grin-stars" aria-hidden="div"></span>
    </label>
    <p>Excellent</p>
  </div>
</div>

<div id="text">
  <div class="container">
    <form action="/action_page.php">
      <div class="row p-5">
        <div class="col-sm-12">
          <div class="form-group shadow-textarea">
            <label for="feedback">
               If you have any additional feedback, please let us know below...
            </label>
            <textarea class="form-control p-2" id="comment" rows="7" 
              cols="20" placeholder="Comment here...">
            </textarea>
          </div>
          <button type="submit" class="btn btn-danger">
            Submit
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

Answer 2

Your approach has a few flaws that need addressing. Firstly, it is important to assign id attributes to the radio buttons in your HTML for easier identification of individual click events and value inspection. I have added some id's based on the existing name attribute of the radio buttons.

Secondly, I completely revamped the jQuery code to align with the addition of id attributes. This modification ensures that when a radio button is clicked, the script checks if its id matches the specified one, and then displays the corresponding element accordingly.

Show/hide functionality can also be achieved through CSS. Although I removed the display: none; CSS class for the above changes to take effect, you can retain it and utilize jQuery's toggleClass, addClass, and removeClass methods based on the implemented logic.

I simplified the logic further by incorporating a ternary operator, which provides a more concise syntax.

Last but not least, a quick search on platforms like StackOverflow can offer valuable insights. In fact, I came across an answer on StackOverflow (link) that precisely addresses the jQuery issue in your code. I took the time to explain my approach comprehensively because adjustments in both HTML and CSS were necessary in your case.

If you found this solution helpful, please consider 'accepting' or 'upvoting' it. Welcome to the Stack Overflow community!

var text = $('#text');
var showId = 'grin-stars';

$('input[type="radio"]').click(function() {
  $(this).attr('id') === showId ? text.show() : text.hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cc-selector row" id="moods">
  <div class="col">
    <input id="angry" type="radio" name="radioBtn" value="angry" />
    <label class="face-cc" for="angry">
       <span class="far fa-angry" aria-hidden="div"></span>
     </label>
    <p>Terrible</p>
  </div>

  <div class="col">
    <input id="grin-stars" type="radio" name="radioBtn" value="grin-stars"/>
    <label class="face-cc" for="grin-stars">
      <span class="far fa-grin-stars" aria-hidden="div"></span>
    </label>
    <p>Excellent</p>
  </div>
</div>

<div id="text">
  <div class="container">
    <form action="/action_page.php">
      <div class="row p-5">
        <div class="col-sm-12">
          <div class="form-group shadow-textarea">
            <label for="feedback">
               If you have any additional feedback, please let us know below...
            </label>
            <textarea class="form-control p-2" id="comment" rows="7" 
              cols="20" placeholder="Comment here...">
            </textarea>
          </div>
          <button type="submit" class="btn btn-danger">
            Submit
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

A guide on displaying containers with jQuery and CSS

Answer №1

Similar questions

Having a problem with Node.js and async.eachSeries? Want to figure out how to configure the callback function to generate a JSON file for each element in an array of

Having trouble accessing a website that is embedded within an iframe, and experiencing issues with several ajax post requests not functioning properly within the iframe specifically on Chrome

Hide the overlay fullscreen menu upon clicking an anchor link

NodeJS reference copying problem

What's the reason for this Ajax request taking such a long time to display on the

Issue with Google map displaying incorrectly when attempting to print

Establishing header cache control within the KOA framework

What is the best way to implement a delay for ajax requests triggered by onkeyup events, and then restart the delay countdown each

How to customize the color of radio buttons in JFXRadioButton using CSS

Can you tell me the Bootstrap 4 equivalent class for '.well'?

Why does the getComputedStyle function return null for IE11 and Edge when using Kendo React Grid within a Popout window, while it works fine in Chrome, Opera, and Firefox?

Looping through nested arrays in an array of objects with Angular's ng-repeat

Steps for positioning a z-indexed division

Is there a way to incorporate a click function into this code if the id and xpath methods are ineffective?

Perform Function Again

Inserting a crisp white divider between items in breadcrumb navigation in the form of arrowheads

locate an inner div element

What is the best way to position an image beside a jquery dialog box?

What is the best way to horizontally align an element within a Material UI Grid item?

The struggle of accessing child components using ViewChild in Angular