Solved

Jquery filter list

Posted on 2013-10-22
4
379 Views
Last Modified: 2013-11-30
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
Comment
Question by:yando18
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39593179
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
 
LVL 56

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39593281
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question