Utilizing checkboxes to toggle the visibility of a div element with varying headings

Question

Utilizing checkboxes to toggle the visibility of a div element with varying headings

By toggling a checkbox, I aim to show or hide the same div with a different heading.

$('#cbxShowHide').click(function() {
  this.checked ? $('#block').show(1000) : $('#block').hide(1000);
});

#block {
  display: none;
  background: #eef;
  padding: 10px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbxShowHide" />
<label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" id="cbxShowHide1" />
<label for="cbxShowHide1">Show/Hide1</label>
<input type="checkbox" id="cbxShowHide2" />
<label for="cbxShowHide2">Show/Hide2</label>
<div id="block">Some text here</div>

When the "Show/Hide" checkbox is clicked, the text "Some text here" is displayed.

I intend to extend this functionality to multiple checkboxes so that each one can show "some text here" uniquely like "some text here1", "some text here2", and so on.

javascript jquery css checkbox

Answer 1

Answer №1

Check out the jsfiddle link provided for reference. I have restructured the content by moving it from a div into a span.

$('#cbxShowHide1').click(function(){
    $('#block span').text("Your new text for this div")
    this.checked?$('#block').show(1000):$('#block').hide(1000);
});

I hope this explanation is clear and helpful.

Answer 2

Check out the jsfiddle link provided for reference. I have restructured the content by moving it from a div into a span.

$('#cbxShowHide1').click(function(){
    $('#block span').text("Your new text for this div")
    this.checked?$('#block').show(1000):$('#block').hide(1000);
});

I hope this explanation is clear and helpful.

Answer 3

Answer №2

Instead of just targeting the click event for a specific ID "cbxShowHide," I updated it to apply to all inputs that are clicked.

$('[type~=checkbox]').click(function(){
    this.checked?$('#block').show(1000):$('#block').hide(1000);
});

$('[type~=checkbox]').click(function(){
    this.checked?$('#block').show(1000):$('#block').hide(1000);
});

#block{display:none;background:#eef;padding:10px;text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" id="cbxShowHide1"/><label for="cbxShowHide">Show/Hide1</label>
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide">Show/Hide2</label>
<div id="block">Some text here</div>

Answer 4

Instead of just targeting the click event for a specific ID "cbxShowHide," I updated it to apply to all inputs that are clicked.

$('[type~=checkbox]').click(function(){
    this.checked?$('#block').show(1000):$('#block').hide(1000);
});

$('[type~=checkbox]').click(function(){
    this.checked?$('#block').show(1000):$('#block').hide(1000);
});

#block{display:none;background:#eef;padding:10px;text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" id="cbxShowHide1"/><label for="cbxShowHide">Show/Hide1</label>
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide">Show/Hide2</label>
<div id="block">Some text here</div>

Answer 5

Answer №3

To start, it is important to utilize a class instead of an ID for this functionality to work properly with each individual checkbox.

Additionally, keep in mind that the "for" attribute in a label tag is specific to an ID, so ensure that the label is correctly linked to its corresponding checkbox.

I hope this example serves as a helpful guide:

$('.checkbox').click(function(){
   if($(this).attr('id') == 'cbxShowHide')
   {
        $('#block').text('Some text here')
   }
   if($(this).attr('id') == 'cbxShowHide1')
   {
        $('#block').text('Some text here1')
   }
   if($(this).attr('id') == 'cbxShowHide2')
   {
        $('#block').text('Some text here2')
   }

    this.checked?$('#block').show(1000):$('#block').hide(1000);
});

#block{display:none;background:#eef;padding:10px;text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="checkbox" class='checkbox' id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" class='checkbox' id="cbxShowHide1"/><label for="cbxShowHide1">Show/Hide1</label>
<input type="checkbox" class='checkbox' id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide2</label>
<div id="block">Some text here</div>

Answer 6

To start, it is important to utilize a class instead of an ID for this functionality to work properly with each individual checkbox.

Additionally, keep in mind that the "for" attribute in a label tag is specific to an ID, so ensure that the label is correctly linked to its corresponding checkbox.

I hope this example serves as a helpful guide:

$('.checkbox').click(function(){
   if($(this).attr('id') == 'cbxShowHide')
   {
        $('#block').text('Some text here')
   }
   if($(this).attr('id') == 'cbxShowHide1')
   {
        $('#block').text('Some text here1')
   }
   if($(this).attr('id') == 'cbxShowHide2')
   {
        $('#block').text('Some text here2')
   }

    this.checked?$('#block').show(1000):$('#block').hide(1000);
});

#block{display:none;background:#eef;padding:10px;text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="checkbox" class='checkbox' id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<input type="checkbox" class='checkbox' id="cbxShowHide1"/><label for="cbxShowHide1">Show/Hide1</label>
<input type="checkbox" class='checkbox' id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide2</label>
<div id="block">Some text here</div>

Answer 7

Answer №4

Although not the most stylish, time constraints led me to produce this solution quickly. I hope it fulfills your requirements.

CSS

#sectionA, #sectionB, #sectionC {display:none;background:#eef;padding:10px;text-align:center;}

HTML

<input type="checkbox" id="toggleSectionA"/><label for="toggleSectionA">Toggle Section A</label>
<input type="checkbox" id="toggleSectionB"/><label for="toggleSectionB">Toggle Section B</label>
<input type="checkbox" id="toggleSectionC"/><label for="toggleSectionC">Toggle Section C</label>
<div id="sectionA"><span>Content for Section A</span></div>
<div id="sectionB"><span>Content for Section B</span></div>
<div id="sectionC"><span>Content for Section C</span></div>

JS

$('#toggleSectionA').click(function(){
    this.checked?$('#sectionA').show(1000):$('#sectionA').hide(1000);
});
$('#toggleSectionB').click(function(){
    this.checked?$('#sectionB').show(1000):$('#sectionB').hide(1000);
});
$('#toggleSectionC').click(function(){
    this.checked?$('#sectionC').show(1000):$('#sectionC').hide(1000);
});

Answer 8

Although not the most stylish, time constraints led me to produce this solution quickly. I hope it fulfills your requirements.

CSS

#sectionA, #sectionB, #sectionC {display:none;background:#eef;padding:10px;text-align:center;}

HTML

<input type="checkbox" id="toggleSectionA"/><label for="toggleSectionA">Toggle Section A</label>
<input type="checkbox" id="toggleSectionB"/><label for="toggleSectionB">Toggle Section B</label>
<input type="checkbox" id="toggleSectionC"/><label for="toggleSectionC">Toggle Section C</label>
<div id="sectionA"><span>Content for Section A</span></div>
<div id="sectionB"><span>Content for Section B</span></div>
<div id="sectionC"><span>Content for Section C</span></div>

JS

$('#toggleSectionA').click(function(){
    this.checked?$('#sectionA').show(1000):$('#sectionA').hide(1000);
});
$('#toggleSectionB').click(function(){
    this.checked?$('#sectionB').show(1000):$('#sectionB').hide(1000);
});
$('#toggleSectionC').click(function(){
    this.checked?$('#sectionC').show(1000):$('#sectionC').hide(1000);
});

Answer 9

Answer №5

Check out this Jsfiddle example:jsfiddle.net/xs523nw8/6/

   $("input[type='checkbox']").click(function(){
       if($(this).is(":checked")){
      $(this).siblings("input[type='checkbox']").removeAttr("checked");
      $("#block").text('Displaying some text here :'+$(this).index());
      $("#block").show(1000)
    }
    else{
      $("#block").hide(1000);
    }
   });

Answer 10

Check out this Jsfiddle example:jsfiddle.net/xs523nw8/6/

   $("input[type='checkbox']").click(function(){
       if($(this).is(":checked")){
      $(this).siblings("input[type='checkbox']").removeAttr("checked");
      $("#block").text('Displaying some text here :'+$(this).index());
      $("#block").show(1000)
    }
    else{
      $("#block").hide(1000);
    }
   });

Answer 11

Answer №6

Take a look at this demo https://jsfiddle.net/tz5ror3s/

I've included a new class in the checkboxes and linked a click event to them, displaying the text inside a block span.

$('.cbxShowHide').click(function() {
    $('#block span').text('Here is some additional text ' + $(".cbxShowHide:checked").length );
    $('#block').show();
});

Answer 12

Take a look at this demo https://jsfiddle.net/tz5ror3s/

I've included a new class in the checkboxes and linked a click event to them, displaying the text inside a block span.

$('.cbxShowHide').click(function() {
    $('#block span').text('Here is some additional text ' + $(".cbxShowHide:checked").length );
    $('#block').show();
});

Answer 13

Answer №7

1. Changing text of an element dynamically

View the fiddle

Situation: You only need to toggle the content of the #block element. In this scenario, using type='radio' inputs instead of type='checkbox' is more suitable since you are toggling text in one location and selecting just one option at a time is sufficient.

2. Displaying elements depending on checkbox status

Check out the fiddle

Situation: You want to show or hide multiple boxes based on the checkbox input's state (checked/unchecked).

Upon each change in state, it iterates through the checkboxes and:

If a checkbox is checked, the corresponding box with the same number is shown
If a checkbox is unchecked, the corresponding box with the same number is hidden

Answer 14

1. Changing text of an element dynamically

View the fiddle

Situation: You only need to toggle the content of the #block element. In this scenario, using type='radio' inputs instead of type='checkbox' is more suitable since you are toggling text in one location and selecting just one option at a time is sufficient.

2. Displaying elements depending on checkbox status

Check out the fiddle

Situation: You want to show or hide multiple boxes based on the checkbox input's state (checked/unchecked).

Upon each change in state, it iterates through the checkboxes and:

If a checkbox is checked, the corresponding box with the same number is shown
If a checkbox is unchecked, the corresponding box with the same number is hidden

Utilizing checkboxes to toggle the visibility of a div element with varying headings

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Delete the CSS class from a specific HTML element

The component <FormControl /> does not support the variant prop

Using Polymer in Chrome Extension content script

Tips for connecting a suspended div below a Bootstrap 5 fixed navigation bar

Stop text from being selected across all browsers in Firefox

Insert an element at the start of a sorted array object

Content in React Router may fail to load when refreshing the page, navigating forward, or manually

Swap out ASP.NET AJAX with jQuery for making ASHX requests

The 'name' property of Axios and Vuex is not defined and cannot be read

Using JavaScript to transfer the data ID from a button to a form

Showcasing tooltip when hovering over Font Awesome icon

Incorporating jQuery validation rules for dynamically generated elements in ASP.NET

Error encountered: index.html:17 - An InvalidStateError was thrown when attempting to execute the 'send' function on the XMLHttpRequest object. The object's state must be OPENED in order to send the Ajax request

Is there a way to delete specific information from a JSON response?

Adjust the alignment of text within the <select> tag to the right in Safari browser

Set a variable equal to the output of an external function, but receive an undefined value in

Having difficulty implementing dynamic contentEditable for inline editing in Angular 2+

In Node.js, the mongodb+srv URI does not support including a port number

Select multiple options by checking checkboxes in each row using React

Switch to a different form when clicked using JavaScript