Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

85
Views
How to toggleClass dependent of selecting input

I have advanced work on my project generator of documents. It is simple. Someone write date and in document is written (e.x. name of company is used more 50 times, so this have so advantage).

select.onchange = function() {
  if (select == "firma") {
    $("#osoba_fizyczna").toggleClass('hidden', 'visibility');
    $('#firma').toggleClass('visibility', 'hidden');
  } else {
    $('#firma').toggleClass('hidden', 'visibility');
    $('#osoba_fizyczna').toggleClass('visibility', 'hidden');
  }
}
hidden {
  display: none;
}

visibility {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
  <option value="Firma">firma</option>
</select>

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

First, you don't have any elements in your example which would be affected by your script and show the practical outcome. So I added two elements in the snippet below which have those IDs, the second one having the "hidden" class.

Second, use select.value in your condition instead of just select

And as a third step, I'd suggest to only use one class (in my snippet the "hidden" class) and toggle the display parameter with that - if it's removed, the element will have the default block display.

And last, CSS rules for classes need to have a dot in front of the class name to be valid class selectors.

select.onchange = function() {
  if (select.value == "Firma") {
    $('#osoba_fizyczna').toggleClass('hidden');
    $('#firma').toggleClass('hidden');
  } else {
    $('#firma').toggleClass('hidden');
    $('#osoba_fizyczna').toggleClass('hidden');
  }
}
.hidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
  <option value="Firma">firma</option>
</select>

<div id="firma" class="hidden">This is the "firma" element</div>
<div id="osoba_fizyczna">This is the "osoba_fizyczna" element</div>

And actually, with just two option values you could write the function a lot simpler:

select.onchange = function() {
  $('#osoba_fizyczna, #firma').toggleClass('hidden');
}
.hidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
  <option value="Firma">firma</option>
</select>

<div id="firma" class="hidden">This is the "firma" element</div>
<div id="osoba_fizyczna">This is the "osoba_fizyczna" element</div>

about 4 years ago · Juan Pablo Isaza Report

0

I think you're confused about a few things. First, toggleClass() doesn't take two class arguments. You'd toggle two as 'one two'. See https://api.jquery.com/toggleclass.

Then, classes are defined in CSS with dots at the front, as .hidden. Really, though, you don't even need to do that. Just use jQuery's show() and hide() methods.

Also, you need to target your select element by ID differently. You were targeting all select elements with a native JavaScript technique that wasn't quite right.

$('#select').change(function() {
  if ($(this).val() === "Firma") {
    $("#osoba_fizyczna").hide();
    $('#firma').show();
  } else {
    $('#firma').hide();
    $('#osoba_fizyczna').show();
  }
});
.hidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
  <option value="Firma">firma</option>
</select>

<div id="osoba_fizyczna" class="hidden">osoba_fizyczna</div>
<div id="firma" class="hidden">firma</div>

about 4 years ago · Juan Pablo Isaza Report

0

for the Javascript part, as the toggleCalss can't take two parameters I think it is better to use the addClass and removeClass functions.

select.onchange = function() {
          if ($("#select").val() == "Firma") {
            $("#osoba_fizyczna").addClass('visibility').removeClass('hidden');
            $('#firma').addClass('hidden').removeClass('visibility');
          } else {
            $("#firma").addClass('visibility').removeClass('hidden');
            $('#osoba_fizyczna').addClass('hidden').removeClass('visibility');
          }
}

For the CSS part, I just add a dot . to mention that it is a class

.hidden {
    display: none;
}

.visibility {
     display: block;
}

For the HTML part, I add Ids for the two options

<select id="select">
                <option id="osoba_fizyczna" value="właściciel serwisu będący osobą fizyczną -">osoba fizyczna</option>
                <option id="firma" value="Firma">firma</option>
</select>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!