I want to display div's with ID's that match the data attribute of the selected list item. Below is the code, I think I'm nearly there I just need to get the specific value of the data attribute. I'll keep trying but some help would be great :)
.hide {
display: none;
}
<ul class="list-filter">
<li data-target="#example1">Example 1</li>
<li data-target="#example2">Example 2</li>
</ul>
<div class="hide filtered-content" id="example1">hi</div>
<div class="hide filtered-content" id="example2">hi-2</div>
const filter = function () {
var $current = $('ul.list-filter li');
$current.on('click', function() {
var $dataType = $(this).attr('data-target'),
$dataContent = $('.filtered-content[id]');
$('ul.list-filter li').removeClass('active');
$(this).addClass('active');
if ($dataContent === $dataType) {
$dataContent.removeClass('hide');
} else {
$dataContent.addClass('hide');
}
});
};
This should do what you need.
$(function(){ var filteredContent = $('.filtered-content div'); $('ul.list-filter li').on('click', function(){ $('ul.list-filter li').removeClass('active'); $(this).addClass('active'); var $dataType = $(this).attr('data-target'); filteredContent.hide(); $($dataType).show(); }); });
.hide{ display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="list-filter"> <li data-target="#example1">Example 1</li> <li data-target="#example2">Example 2</li> </ul> <div class="filtered-content"> <div class="hide" id="example1">hi</div> <div class="hide" id="example2">hi-2</div> </div>
Firstly, You are missing ""
close tag at class="list-filter
, data-target="#example1
and data-target="#example2
Secondly, You have not called filter
function. It should look like this
$( document ).ready(function() {
filter();
});
Thirdly, $dataContent = $('.filtered-content[id]');
is incorrect. It might fix like this $dataContent = $(dataType);
Finally, You should add data-content
class, then handle jQuery like $(".data-content").addClass('hide');
instead.
$( document ).ready(function() { filter(); }); const filter = function () { var $current = $('ul.list-filter li'); $current.on('click', function() { var dataType = $(this).attr('data-target'), $dataContent = $(dataType); $('ul.list-filter li').removeClass('active'); $(this).addClass('active'); $(".data-content").addClass('hide'); $dataContent.removeClass('hide'); }); };
.hide { display: none; } .active{ color:red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="list-filter"> <li data-target="#example1">Example 1</li> <li data-target="#example2">Example 2</li> </ul> <div class="hide data-content" id="example1">hi</div> <div class="hide data-content" id="example2">hi-2</div>
I think what you meant to do was to get the data-target
from the clicked element and show the div whose id matches that data-target
while hiding the rest of the elements
So this is probably what you need
.hide {
display: none;
}
<ul class="list-filter>
<li data-target="#example1>Example 1</li>
<li data-target="#example2>Example 2</li>
</ul>
<div class="filtered-content hide" id="example1">hi</div>
<div class="filtered-content hide" id="example2">hi-2</div>
const filter = function () {
var $current = $('ul.list-filter li');
$current.on('click', function() {
var targetId = $(this).attr('data-target'),
$allContent = $(`div.filtered-content`);
$dataContent = $(targetId);
$('ul.list-filter li').removeClass('active');
$(this).addClass('active');
$allContent.addClass('hide');
$dataContent.removeClass('hide');
});
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.