CODEWITHSUNDEEP
javascriptjqueryhtmlcss
龍王_
龍王_

Reputation: 73

Using jQuery to show/hide divs based on the content of another element

I'm working with a jQuery UI date picker that calculates the number of days selected. The default value is 1. I would like to display a different div depending on the number of days selected.

<div class="dates">1</day>

<div class="one-day" style="display:block;">You are staying for one day</div>

<div class="more-than-one-day" style="display:none;">You are staying for more than one day</div>

If the value of .dates changes to > 1, what method can I use to hide .one-day and show .more-than-one-day?

Like this:

<div class="dates">2</day>

<div class="one-day" style="display:none;">You are staying for one day</div>

<div class="more-than-one-day" style="display:block;">You are staying for more than one day</div>

Hope you can help!

M.

Upvotes: 2

Views: 1081

Answers (3)

JonVD
JonVD

Reputation: 4268

Updated to include new requirements.

You could try using something like this:

var datesFunction = function () {
    var numDays = $('.dates').html();
    if (numDays == 1) {
        $('.more-than-one-day').hide();
        $('.one-day').show();
    } else if (numDays > 1) {
        $('.one-day').hide();
        $('.more-than-one-day').show();
    } else {
        //Default, maybe hide both?
        $('.one-day').hide();
        $('.more-than-one-day').hide();
    }
};

$(document).ready(function () {

    var dateDiff = function(selectedDate) {
          var fromDate = $('#from-date').datepicker('getDate');
          var toDate = $('#to-date').datepicker('getDate');
          var dateDifference = 0;
          if (fromDate && toDate) {
                dateDifference = Math.floor((toDate.getTime() - fromDate.getTime()) / 86400000);
          }
          $('.dates').text(dateDifference);
          datesFunction();
    };

    $('#from-date').datepicker({ 
        onSelect: dateDiff
    });
    $('#to-date').datepicker({
        onSelect: dateDiff
    });
});

Example JsFiddle Here

Upvotes: 3

Thirumalai murugan
Thirumalai murugan

Reputation: 5914

<div class="dates">1</div>
<div class="dates">2</div>

<div class="one-day" style="display:block;">You are staying for one day</div>    
<div class="more-than-one-day" style="display:none;">You are staying for more than one day</div>

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('.dates').click(function(){
    alert($(this).html());
    if($(this).html()=='1')
    {

        $('.one-day').show();
        $('.more-than-one-day').hide();
    }
    else
    {
        $('.one-day').hide();
        $('.more-than-one-day').show();
    }
});
});//]]>  

</script>

DEMO

Upvotes: 0

skparwal
skparwal

Reputation: 1084

just try this one:

$( "#from" ).datepicker({
    onSelect: function( selectedDate ) {
      here is your hide and 
    }
});

Upvotes: 0

Related Questions