Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    78
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Question Show hide li using jquery

    I have one ul with attribute data-value:
    Code:
    <ul class='dropSelect'>
    							
    								<li id="filterTypes" data-value="My Patients">
    									<span title='My Patients'>My Patients</span>
    								</li>
    								<li id="filterTypes" data-value="Clinic Patients">
    									<span title='Clinic Patients'>Clinic Patients</span>
    								</li>
    								<li id="filterTypes" data-value="Inactive Patients">
    									<span title='Inactive Patients'>Inactive Patients</span>
    								</li>									
    									
    						</ul>
    and another ul with :
    Code:
    <ul class='dropSelect' id="drpSlt" style="width:auto !important">
    							<span class="ActionStrings">Show</span>
    								<li id="myPatientsShow" data-value="My Patients">
    									<ul>
    										<li><span title='All'>All</span></li>
    										<li><span title='Patients with no future schedule'>Patients with no future schedule</span></li>
    										<li><span title='Patients with overdue follow-up'>Patients with overdue follow-up</span></li>
    										<li><span title='Patients with pending transmissions due today'>Patients with pending transmissions</span></li>
    										<li><span title='Patients released for transfer'>Patients released for transfer</span></li>
    									</ul>
    								</li>
    								<li id="clinicPatientsShow" data-value="Clinic Patients">
    									<ul>
    										<li><span title='All'>All(clinic)</span></li>
    										<li><span title='Patients with no future schedule'>Patients with no future schedule(clinic)</span></li>
    										<li><span title='Patients with overdue follow-up'>Patients with overdue follow-up(clinic)</span></li>
    										<li><span title='Patients with pending transmissions due today'>Patients with pending transmissions(clinic)</span></li>
    										<li><span title='Patients released for transfer'>Patients released for transfer(clinic)</span></li>
    									</ul>
    								</li>
    								<li id="inActivePatientsShow" data-value="Inactive Patients">
    									<ul>
    										<li><span title='All'>All(inActive)</span></li>
    										<li><span title='Patients with no future schedule'>Patients with no future schedule(inActive)</span></li>
    										<li><span title='Patients with overdue follow-up'>Patients with overdue follow-up(inActive)</span></li>
    										<li><span title='Patients with pending transmissions due today'>Patients with pending transmissions(inActive)</span></li>
    										<li><span title='Patients released for transfer'>Patients released for transfer(inActive)</span></li>
    									</ul>
    								</li>	
    							<span class="ActionStrings">Search</span>
    								<li id="myPatientsSearch" data-value="My Patients">
    									<ul>
    										<li><span title='Patient Name/ID'>Patient Name/ID</span></li>
    										<li><span title='Patient Merlin.net™ Number'>Patient Merlin.net™ Number</span></li>
    										<li><span title='Physician Name/ID'>Physician Name/ID</span></li>
    										<li><span title='Device Model/Serial'>Device Model/Serial</span></li>
    										<li><span title='Lead Model'>Lead Model</span></li>
    										<li><span title='Device Model '>Device Model (picklist)</span></li>
    										<li><span title='Device Type (picklist)'>Device Type (picklist)</span></li>
    										<li><span title='Clinic Location (picklist)'>Clinic Location (picklist)</span></li>
    										<li><span title='Last Transmission Date Range'>Last Transmission Date Range</span></li>
    									</ul>
    								</li>	
    								<li id="clinicPatientsSearch" data-value="Clinic Patients">
    									<ul>
    										<li><span title='Patient Name/ID'>Patient Name/ID(Clinic)</span></li>
    										<li><span title='Patient Merlin.net™ Number'>Patient Merlin.net™ Number(Clinic)</span></li>
    										<li><span title='Physician Name/ID'>Physician Name/ID(Clinic)</span></li>
    										<li><span title='Device Model/Serial'>Device Model/Serial(Clinic)</span></li>
    										<li><span title='Lead Model'>Lead Model(Clinic)</span></li>
    										<li><span title='Device Model '>Device Model (picklist)(Clinic)</span></li>
    										<li><span title='Device Type (picklist)'>Device Type (picklist)(Clinic)</span></li>
    										<li><span title='Clinic Location (picklist)'>Clinic Location (picklist)(Clinic)</span></li>
    										<li><span title='Last Transmission Date Range'>Last Transmission Date Range(Clinic)</span></li>
    									</ul>
    								</li>
    								<li id="inActivePatientsSearch" data-value="Inactive Patients">
    									<ul>
    										<li><span title='Patient Name/ID'>Patient Name/ID(Inactive)</span></li>
    										<li><span title='Patient Merlin.net™ Number'>Patient Merlin.net™ Number(Inactive)</span></li>
    										<li><span title='Physician Name/ID'>Physician Name/ID(Inactive)</span></li>
    										<li><span title='Device Model/Serial'>Device Model/Serial(Inactive)</span></li>
    										<li><span title='Lead Model'>Lead Model(Inactive)</span></li>
    										<li><span title='Device Model '>Device Model (picklist)(Inactive)</span></li>
    										<li><span title='Device Type (picklist)'>Device Type (picklist)(Inactive)</span></li>
    										<li><span title='Clinic Location (picklist)'>Clinic Location (picklist)(Inactive)</span></li>
    										<li><span title='Last Transmission Date Range'>Last Transmission Date Range(Inactive)</span></li>
    									</ul>
    								</li>	
    						</ul>

    when i click on 1st ul with specific data-value, in 2nd ul li with that specific data-value should display.
    Eg: If I select My Patient in first UL it should display LI with same data-value("My patient")


    Thanks in advance

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Probably a cleaner way but:
    Code:
    $('.dropSelect:eq(0) li').click(function(){
        dt = $(this).attr('data-value');
        $('.dropSelect:eq(1) li').each(function(){
            if($(this).attr('data-value') == dt){
                $(this).css({'background' : 'green'});
            } else {
                $(this).css({'background' : 'white'}); 
            }
        });
    });
    I'm just changing the background color so you can see what is being selected. you can make it do what you need it to do.

    Edit fiddle - JSFiddle
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You can also use $(this).data('value') instead of $(this).attr('data-value').

    Using .data() is more useful especially if you have data attributes that you don't want to treat as strings as it automatically converts the string value to booleans, numbers, objects, arrays, or null.

    For example, if you have this div:
    Code:
    <div id="test" data-value="10" data-flag="false" data-object='{"name":"Glenn"}' data-obj="null" data-array="[1,2,3]"></div>
    Then all of these will evaluate to true;
    Code:
    $('#test').data('value') === 10
    $('#test').data('flag') === false
    $('#test').data('object').name === 'Glenn'
    $('#test').data('obj') === null
    $('#test').data('array')[1] === 1
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •