jQuery code not working as expected

Hi,

I have used a jQuery code show below from source and modified it so that when  the advanced search button in the content of the first tab is clicked it would show the table containing id adv-search and when that button is clicked again it would again hide the table containing id adv-search. But the script is not working as expected, i.e. when the advanced search button is clicked it shows the table and immediately hides it back without clicking the button again. which I don't want to happen. I want to hide the content to hide only when the advanced search button is clicked again.

Kindly let me know any inputs required. I am attaching the most of the code.

Can someone help me with identifying what is the issue?

Thanks in advance.
<div class="tabs">
					<ul class="tab-links">
						<li class="active" style="margin-left: 150px;"><a href="#tab1">PO's</a></li>
						<li><a href="#tab2" style="margin-left: 175px;">Device's</a></li>
					</ul>
					<hr>
					<div class="tab-content">
						<form id="tab1" class="tab active">
							<h2>List of PO's</h2>
							<input type="text">&nbsp;&nbsp;&nbsp;<button>Search</button>&nbsp;&nbsp;&nbsp;<button id="advsearch-btn">Advanced Search</button>
							<table id="adv-search">
								<td>123</td>
								<td>234</td>
								<td>234</td>
								<tr><td>asd</td></tr>
							</table>
						</form>
						<form id="tab2" class="tab">
							<p>Tab #2 content goes here!</p>
							<p>Test Conten.</p>
						</form>
					</div>
				</div>

Open in new window

$(document).ready(function() {
	$('.tabs .tab-links a').on('click', function(e)  {
		var currentAttrValue = $(this).attr('href');
		$('.tabs ' + currentAttrValue).slideDown(400).siblings().slideUp(400);// Show/Hide Tabs
		$(this).parent('li').addClass('active').siblings().removeClass('active');// Change/remove current tab to active
		e.preventDefault();
	});
	$('#adv-search').hide();//added this code myself
	$('#advsearch-btn').click(function(){//added this code myself
		$('#adv-search').toggle();//added this code myself
	});//added this code myself
});

Open in new window

LVL 1
Vipin KumarSr. Network EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
test page : http://jsfiddle.net/xx1udomw/
replace :
      $('#advsearch-btn').click(function(){//added this code myself
            $('#adv-search').toggle();//added this code myself
      });//added this code myself
by :
      $('#advsearch-btn').click(function(evt){//added this code myself
                evt.preventDefault(); // else you're submitting your form and reloading the page
            $('#adv-search').toggle();//added this code myself
      });//added this code myself
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
leakim971PluritechnicianCommented:
another way :
$('#advsearch-btn').click(function(){//added this code myself
            $('#adv-search').toggle();//added this code myself
            return false;
      });//added this code myself
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.