Some background:I am having trouble with the following:Currently I have a tab element on my webpage (3 tabs). This works out fine--> when a tab is clicked, the script tabs.js will change the css from display: none to display: block.I would like to nest another jquery element in one of the tabs: a 'send me your comments' form, which uses jquery to stay on the page after clicking submit. Furthermore, the form content will be replaced by a 'thanks for your comments' message.I have been able to run both the tabs and the 'send me your comments' form succesfully. But now I want to combine the two. Meaning, I want to add the form on tab #1.The problem:I am bumping into the following problems:
the form will not show correclty once embedded in the tab1 (conflicting css, but I don't know how to fix this)
the form will disappear correcly once clicked on a different tab, but does not reappear after clicking tab1. (problem with tabs.js that does not correctly alter the css of the form elements into 'display: block'.)
Any help would be highly appreciated!!The code I am working with at the moment:Working version of Tabs HTML:\[code\]<div class="tabs"><label class="current">Tab1</label><div class="current fast" style="display: block;">Lorem Ipsum Dolor</div><label>Tab2</label><div>Lorem Ipsum Dolor</div><label>Tab3</label><div>Lorem Ipsum Dolor</div></div>\[/code\]Working version of the tabs.js script:\[code\]$(document).ready(function(){$(".tabs label").bind('click', function () {$(".tabs label").removeClass('current');$(".tabs div").slideUp('slow');$(this).next().slideToggle('slow');$(this).next().addClass('slow');$(this).addClass('current');});});\[/code\]Current CSS for tabs\[code\]div.tabs {margin: 30px 0px 80px 0px;width: 350px;height: 120px;position: relative;}div.tabs label {float: left;border: 1px solid #d0ccc9;background: #e6e6e6;padding: 2px 15px;font-size: 10px;color: #666;z-index: 20;border-bottom: 0px;position: relative;margin-left: 0px;cursor: pointer;line-height: 20px;height: 20px;left: 0px;font-weight: bold;text-transform: uppercase;}div.tabs label.current {background: black;color: white;font-weight: bold;z-index: 40;cursor: default;}div.tabs label.formlbl {float: none;border: none;background: none;font-size: 11px;position: inherit;margin-left: 0px;cursor: none;line-height: normal;height: auto;left: auto;font-weight: normal;text-transform: none;}div.tabs div {position: absolute;top: 25px;left: 0px;border: 1px solid #d0ccc9;background: white;padding: 10px 15px;line-height:15px;font-size: 11px;color: #000;width: 310px;z-index: 30;display: none;}div.tabs div.current {display: block;}div.tabs div a {color: black;text-decoration: none;}\[/code\]Working version of the Send Email in Form HTML:\[code\]<script type="text/javascript">$(document).ready(function() {//if submit button is clicked$('#submit').click(function () { //Get the data from all the fieldsvar name = $('input[name=name]');var email = $('input[name=email]');var website = $('input[name=website]');var comment = $('textarea[name=comment]');//Simple validation to make sure user entered something//If error found, add hightlight class to the text fieldif (name.val()=='') {name.addClass('hightlight');return false;} else name.removeClass('hightlight');if (email.val()=='') {email.addClass('hightlight');return false;} else email.removeClass('hightlight');if (comment.val()=='') {comment.addClass('hightlight');return false;} else comment.removeClass('hightlight');//organize the data properlyvar data = 'http://stackoverflow.com/questions/14083026/name=' + name.val() + '&email=' + email.val() + '&website=' + website.val() + '&comment=' + encodeURIComponent(comment.val());//disabled all the text fields$('.text').attr('disabled','true');//show the loading sign$('.loading').show();//start the ajax$.ajax({//this is the php file that processes the data and send mailurl: "sendmail_form.php", //GET method is usedtype: "GET",//pass the data data: data, //Do not cache the pagecache: false,//successsuccess: function (html) { //if process.php returned 1/true (send mail success)if (html==1) { //hide the form$('.form').fadeOut('slow'); //show the success message$('.done').fadeIn('slow');//if process.php returned 0/false (send mail failed)} else alert('Sorry, unexpected error. Please try again later.'); } });//cancel the submit button default behavioursreturn false;}); }); </script><body><div class="block"><div class="done"><b>Thank you !</b> We have received your message. </div><div class="form"><form method="post" action="sendmail_form.php"><div class="element"><label>Name</label><input type="text" name="name" class="text" /></div><div class="element"><label>Email</label><input type="text" name="email" class="text" /></div><div class="element"><label>Website</label><input type="text" name="website" class="text" /></div><div class="element"><label>Comment</label><textarea name="comment" class="text textarea" /></textarea></div><div class="element"><input type="submit" id="submit"/><div class="loading"></div></div></form></div></div><div class="clear"></div></body></html>\[/code\]Current CSS for form\[code\].clear {clear:both}.block {width:400px;margin:0 auto;text-align:left;}.element * {padding:5px; margin:2px; font-family:arial;font-size:12px;}.element label {float:left; width:75px;font-weight:700 }.element input.text {float:left; width:270px;padding-left:20px; } .element .textarea {height:120px; width:270px;padding-left:20px; } .element .hightlight {border:2px solid #9F1319;background:url(iconCaution.gif) no-repeat 2px } .element #submit {float:right;margin-right:10px; } .loading {float:right; background:url(ajax-loader.gif) no-repeat 1px; height:28px; width:28px; display:none; } .done {background:url(iconIdea.gif) no-repeat 2px; padding-left:20px;font-family:arial;font-size:12px; width:70%; margin:20px auto; display:none }\[/code\]
