how to dynamically hide or reveal tables rows as needed

[Stuart Bennett]

i have a contact us form if my dropdown field is set to “Website Design Enquiry” then the label and field for website address need to appear.

If “Website hosting Enquiry” is selected we need the website address as we did for web design but also need the dropdown for choosing a hosting package to appear.

if “Mobile App Development Enquiry” is selected I dont need the website address field or hosting package dropdown but need the tr for the question “Which Platform?” and the tr for the checkboxes for IOS android, blackberry and windows phone to magically appear.

but i cannot figure out how to do this as i know virtually nothing about css jquery or javascript so need help working out how to acheive this.

anyone know what i can do?

[Paulie_D]

We’d need to see an example in Codepen.io before being able to comment.

I do think the answer will be Javascript or Jquery though.

[Stuart Bennett]

Okay

The link to the code in codepen is http://cdpn.io/kzwey i have included the html for the form and the css and the javascript hopefully this will help.

[Alen]

Hopefully this can get you started.
http://codepen.io/alenabdula/pen/oCpDH

[Stuart Bennett]

Hi Alen

I tried the code but it isnt working.

Your text to link here…

If you click the link above to view my code on codepen hopefully this will help you work out where i have gone wrong.

[Paulie_D]

In what way isn’t it working?

@Alen provided you with a simple structure and code.

Your existing code seems to use tables for layout and a lot of inline CSS.

You really should find a more flexible and current HTML & CSS structure.

Oh, and Codepen examples should be reduced cases….please check the Tips links on the right hand side of this page.

[Stuart Bennett]

i followed the structure alan gave me but the fields are always visible when they should be hidden and do not disappear or appear as subject changes so the javascript isnt working.

so having followed instructions given and it doesnt work i would like to know why it isn’t working.

regarding the codepen stuff i needed to include the whole form for you to see the issue i needed all the css i put in so it is readable when previewing the result so i dont see how i could have reduced it.

[Paulie_D]

Well there is no JS/JQ in your Codepen so you might want to start there.

[Stuart Bennett]

<script type="text/javascript">
/*
      https://css-tricks.com/forums/topic/how-to-dynamically-hide-or-reveal-tables-rows-as-needed/#post-169277
*/

var $ourServices = $('#subject'),
    $webDesign = $('#website'),
    $webHosting = $('#hosting'),
    $whichPlatform = $('#whichplatform'),
    $hiddenBoxes = $('#website, #hosting, #whichplatform');

$hiddenBoxes.hide();

$subject.change(function(){
  var $d = $(this).val();
  switch ($d) {
    case 'Website Design Enquiry':
      $hiddenBoxes.hide();
      $website.fadeIn();
      break;
      
    case 'Website Hosting Enquiry':
      $hiddenBoxes.hide();
      $hosting.fadeIn();
      break;
      
    case 'Mobile App Development Enquiry':
      $hiddenBoxes.hide();
      $whichplatform.fadeIn();
      break;
      
    default:
      $hiddenBoxes.hide();
      break;
  }
});
</script>

thats the js i am using.

[Paulie_D]

It’s not in your Codepen…plus remember that Alen structured his HTML differently from yours so you can’t just copy and paste.

[Stuart Bennett]

Okay Pauli_D I have updated my coden at http://codepen.io/stuartbennett/pen/kzwey so you should now see it all.

The HTML is all in div’s now just like in Alens example those divs reside inside a TD but that shouldn’t really upset anything as i understand it.

part of my problem i think lies in the fact that while alen provided the script it wasn’t made obvious where the script actually has to be placed in the code.

I tried in the head section of my HTML file and it didnt work, tried it in the td where the form lives and it still didnt work

from trying other javascripts on this issue i have learnt that placement of the script is key to getting it working if it isnt positioned in it one and only perfect place it will never function. so any help getting the right place for the code would be appreciated.

[Paulie_D]

Ideally, you would put the JS code into a separate JS file and link it at the bottom of your page just before the closing <body> tag.

The reason being, without going through it line by line, is that the script needs to run after the page had been drawn.

If you link the js file in the <head> it can’t affect anything as the elements in question do not yet exist on the page.

Anyway, this is clearly a JS issue so I will push this over to that section.

[Stuart Bennett]

Okay Paulie

Well i have put my javascript into a js file now as you suggested and linked to it at end of page just before the closing body tag as you suggested it has made absolutely no difference what so ever to how the form functions but at least it can’t mess things up as the page loads now.

[PirateStef]

if(document.getElementById('Subjects').options[document.getElementById('Subjects').selectedIndex].value == "Web App Development Enquiry") {
  document.getElementById("website").style.display="none";
}
else {
  document.getElementById("website").style.display="inline";
}

Perhaps something like this would work?

[Stuart Bennett]

Hi PirateStef

That works for almost Everything

The issue I have now is if I select “Website Hosting Enquiry” I need both “hosting” and “website” to appear if “Website Design Enquiry” then “website” should appear but not “hosting”

but i cannot see how you use the if statement to either test for 2 conditions like if “Website Design Enquiry” OR “Website Hosting Enquiry” then display “website”

or how to make one test trigger multiple blocks. If “Website Hosting Enquiry” then display “website” AND “hosting”

is there any way to do this.

Also It will only hide one object at a time so now I added the test for “Mobile App Development Enquiry” that hides if not selected but hosting and website are now always visible.

also i need whichplatform hosting and website to be hidden by default on page load and only appear if appropriate.

also if whichplatform is hidden then it adds an extra paragraph at the beginning of the td forcing the form down one line which is really annoying and looks really bad.

I have updated my codepen with the latest JS code for you to check.

[Author]

Posts