CODEWITHSUNDEEP
jqueryhtml
hmahdavi
hmahdavi

Reputation: 2354

Hide number elements with jquery and then Show that

I want hide all element that has selected with this selector $('[href^=#Low]') and then show one of them only.I use this code but don't worked.

How to fix this?

Html:

  <a href="#Low1"><h4 class="search-results-title">قوانین کنسلی بلیط قطار وحقوق مسافر </h4></a>
<a href="#Low2"><h4 class="search-results-title">جدول میزان خسارت تاخیر به مسافران قطار </h4></a>
<a href="#Low3"><h4 class="search-results-title"> شرایط و قوانین کرایه خودرو</h4></a>

<div id="low1">11111111111</div>
<div id="low2">22222222222222</div>
<div id="low3">33333333333</div>






 $('[href^=#Low]').click(function() {
            var hrefAttr = $(this).attr('href').toString().substr(1);
            $('[id^=low]').addClass('hidden');
            setTimeout(function () {
                $('#' + hrefAttr + '').removeClass('hidden');
                }, 2000);
            });

Upvotes: 1

Views: 101

Answers (1)

guest271314
guest271314

Reputation: 1

You can use .slice() to retrieve the number at last character position of #Low elements which correspond to hidden #low element

var low = $("[id^=low]").addClass("hidden"); // hide `#low` elements
$("[href^=#Low]").click(function() {
  var hrefAttr = this.href.slice(-1); // store number at end of `href`
  low.addClass("hidden"); // hide displayed `#low` element
  setTimeout(function() {
    // show `#low` element where number at end of `href` is `hrefAttr`
    $("[id=low" + hrefAttr + "]").removeClass("hidden"); 
  }, 2000);
});
.hidden {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#Low1"><h4 class="search-results-title">قوانین کنسلی بلیط قطار وحقوق مسافر </h4></a>
<a href="#Low2"><h4 class="search-results-title">جدول میزان خسارت تاخیر به مسافران قطار </h4></a>
<a href="#Low3"><h4 class="search-results-title"> شرایط و قوانین کرایه خودرو</h4></a>

<div id="low1">11111111111</div>
<div id="low2">22222222222222</div>
<div id="low3">33333333333</div>

Upvotes: 2

Related Questions