Databases
StackOverflow2013
Postsdbo
POjQuery - filter a div based on anchor tag (click)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery - filter a div based on anchor tag (click)
    text
    copied!<p>Say I have 10 div elements with class <strong>.hide</strong>, which is having different different <strong>Category names</strong> (ex. Food, Travelling, Sports....) in that div content.</p> <pre><code>&lt;div id="Categories"&gt; &lt;div class="hide"&gt;Foods are Fruits, Chicken, Rice, Pizza...&lt;/div&gt; &lt;div class="hide"&gt;My Travelling places are Bangalore, Goa, Kolkata..&lt;/div&gt; &lt;div class="hide"&gt;Sports :Cricket, Basket ball, Tennis, ..&lt;/div&gt; . . &lt;/div&gt; </code></pre> <p>And say i have 3 anchor tags,</p> <pre><code>&lt;a href="#"&gt;Food&lt;/a&gt; &lt;a href="#"&gt;Travelling&lt;/a&gt; &lt;a href="#"&gt;Sports&lt;/a&gt; . . </code></pre> <p>so, i want to filter these div.hide elements with respected category. </p> <p>I have done same filtering with check boxes,</p> <pre><code>&lt;script&gt; var $filters = $("input:checkbox[name='fli']"); var $categoryContent = $('#Categories .hide'); var $errorMessage = $('#errorMessage'); $filters.click(function() { // if any of the checkboxes for Category or team are checked, you want to show div's containing their value, and you want to hide all the rest. $categoryContent.hide(); var $selectedFilters = $filters.filter(':checked'); if ($selectedFilters.length &gt; 0) { $errorMessage.hide(); $selectedFilters.each(function (i, el) { $categoryContent.filter(':contains(' + el.value + ')').show(); }); } else { $errorMessage.show(); } }); &lt;/script&gt; </code></pre> <p>but i want this one also,</p> <p>How can i achieve this, please can any one help me.</p> <p>Thanks</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload