• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 395
  • Last Modified:

Jquery filter list

Hey Experts,

I need to develop a filter using jquery and ajax. The list of items toggles information based upon click.


<a href="">one</a>
<a href="">two</a>
<a href="">three</a>
<a href="">four</a>


<div class="item" data-info="one">1</div>
<div class="item" data-info="two">2</div>
<div class="item" data-info="three">3</div>
<div class="item" data-info="four">4</div>

Open in new window

0
yando18
Asked:
yando18
1 Solution
 
Pierre CorneliusCommented:
You mean something like this?
<!DOCTYPE html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<style>
		.item {display:none;}
	</style>
</head>
<body>
	<a href="#" onclick="$('#i1').toggle();">one</a>
	<a href="#" onclick="$('#i2').toggle();">two</a>
	<a href="#" onclick="$('#i3').toggle();">three</a>
	<a href="#" onclick="$('#i4').toggle();">four</a>


	<div id="i1" class="item" data-info="one">1</div>
	<div id="i2" class="item" data-info="two">2</div>
	<div id="i3" class="item" data-info="three">3</div>
	<div id="i4" class="item" data-info="four">4</div>
</body>
</html>

Open in new window

0
 
Julian HansenCommented:
I think in the previous solution you want to do a return false on the onclick ...

Here is a solution that does not rely on inline onclick event handler
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
    $('a').click(function(e){
        // Prevent default behaviour on the <a> click
        e.preventDefault();
    
        // we use the href to find the id of the div to open
        // in a non JS environment this breaks down to an in page link
        var id = $(this).attr('href');
        
        // only process this if it is a click on a non visible anchor
        if (('#'+$('.item:visible').attr('id')) != id) {
            // Hide all the div's
            $('div.item').hide(200, function() {
                // when the divs are hidden - show the one linked to the <a> clicked
                $(id).show(500);
            });
        }
    });
});
</script>
<style type="text/css">
.item {
    border: 1px solid blue;
    padding: 20px;
    display: none;
    margin: 10px 0;
}
.item:nth-child(2n) {
    border: 1px solid red;
}
</style>
</head>
<body>
<a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a>
<a href="#four">four</a>
<div class="item" id="one" data-info="one">1</div>
<div class="item" id="two" data-info="two">2</div>
<div class="item" id="three" data-info="three">3</div>
<div class="item" id="four" data-info="four">4</div>

</body>
</html>

Open in new window

0

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now