jquery hide and show

Explorer ,
Jun 26, 2017 Jun 26, 2017

Copy link to clipboard



I have the form with default it shows below.  When i click on Group, the company is hiding.  When I click on Compay, i want the group is hiding and Company is shown, but my code didn't do it.  Not sure what I have wrong here, please help.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


  <linkrel="stylesheet" href="css/demos.css">

  <!--- sortabledatagrid --->

    <script type="text/javascript" src="js/jquery.tablesorter.js"></script>

<cfparam name="_update" default="off">

<cfparam name="_updatebritm" default="off">

<cfparam name="_groupOption" default="">

<cfparam name="_groupOption2" default="" />

<cfparam name="reporttype" default="company">

<cfparam name="companyOption" default="" />

<cfparam name="com" default="1" />

<script type="text/javascript">

  $(function() {

  $( "#reportTypeGroup" ).buttonset();


  $(document).ready(function() {

  // sort on the first column and third column, order asc


  widgets: ['zebra'],

  sortList: [[4,1]],

  headers: {

  //1: { sorter: false},

  2: { sorter: false},

  3: { sorter: false}

  //5: { sorter: false}





// hide and show drop box when select company or group

  $(document).ready(function() {

    $("input[name$='reporttype']").click(function() {

        var type = $(this).val();


        $("#Reporttype" + type).show();






<cfifreporttypeeq "company">

  <cfset variables.comp = form.companyOption />

    <cfset variables.group = form._groupoption />


  <cfset variables.comp = "" />

  <cfset variables.group = form._groupoption2 />





<div class="demo">

<form name="test" method="post" action="#CGI.SCRIPT_NAME#" id="test">

<table width="200"  cellpadding="0" cellspacing="0" border="0">



      <div id="reportTypeGroup" class="ui-widget">

        <input type="radio" size="10" id="companyType"  name="reporttype" value="company" <cfifreporttype EQ "company">checked="checked"</cfif> /><label for="companyType">Company</label>

  <input type="radio" size="10" id="groupType"  name="reporttype" value="group"   <cfifreporttype EQ "group">checked="checked"</cfif>/><label for="groupType">Group</label>




    <tr><td colspan="4"> </td></tr>

  <tr id="Reporttypecompany" class="desc">

    <td class="label">group:</td>


         <select name="_groupOption" id="_groupCode" onchange='surfto(this.form);'>

            <option value="1" <cfif _groupOption EQ "1">selected="selected"</cfif>>1</option>

            <option value="2" <cfif _groupOption EQ "2">selected="selected"</cfif>>2</option>

            <option value="3" <cfif _groupOption EQ "3">selected="selected"</cfif>>3</option>

            <option value="4" <cfif _groupOption EQ "4">selected="selected"</cfif>>4</option>

            <option value="5" <cfif _groupOption EQ "5">selected="selected"</cfif>>5</option>




<tr><td colspan="4"> </td></tr>

<tr id="Reporttypecompany" class="desc">

<td class="label">company:



select name="companyOption" id="companyCode">

   <option value="0" selected="selected">Choose a company</option>




  <trid="Reporttypegroup" class="desc" style="display: none;">

    <td class="label">group:</td>


   <select name="_groupOption2" id="_groupCode2">

   <option value="1" <cfif _groupOption2 EQ "1">selected="selected"</cfif>>1</option>

   <option value="2" <cfif _groupOption2 EQ "2">selected="selected"</cfif>>2</option>

   <option value="3" <cfif _groupOption2 EQ "3">selected="selected"</cfif>>3</option>

   <option value="4" <cfif _groupOption2 EQ "4">selected="selected"</cfif>>4</option>

   <option value="5" <cfif _groupOption2 EQ "5">selected="selected"</cfif>>5</option>










Getting started







Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation