I have a bunch of forms and to toggle between those forms works just fine. However I think I did my steps backwards.
Ideally, I only want to see my 'generating customer calculations' <a> tag on page load. When I click on it I want to then see the 'calculators' link beneath the first one, and then when I click on that, that's when I want see all form titles.
I am not sure if I need to rearrange my HTML in terms of how my <ul> elements are ordered or what. I have hit a bit of a wall.
$(".calc-nav li a").on("click", function() {
toggleForms($(this).data("id"));
});
$(".calc-nav li:first a").click();
$(".calcs1").hide();
function toggleForms(id) {
$(".forms form").hide();
$(".forms #" + id).show();
}
/* form {
margin-left: 10px;
}
ul {
padding-left: 0;
}
.calc {
background-color: rgb(246, 246, 246);
color: black;
padding: 10px 0px 10px 10px;
border-bottom: 1px solid #dedede;
text-align: left;
font-size: 15px;
line-height: 24px;
cursor: pointer;
list-style-type: none;
margin-bottom: -.1px;
}
.link {
display: block;
color: black;
}
.focus {
color: #005aaa;
}
.title {
background-color: rgb(0, 90, 170);
color: rgb(255, 255, 255);
font-size: 22px;
font-weight: 600;
line-height: 26px;
padding: 10px 0px 10px 10px;
margin-bottom: 0px;
}
.calculatorList {
color: rgb(255, 255, 255);
font-size: 22px;
font-weight: 600;
line-height: 26px;
padding: 10px 0px 10px 10px;
list-style-type: none;
cursor: pointer;
}
p {
padding-top: 10px;
margin-bottom: 0px;
} */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-4">
<ul class="calculatorList">
<li>
<a class="link">Generating Customer Caclulations</a>
</li>
</ul>
<ul>
<li>
<a class="link" data-id="cacls1">Calculators</a>
</li>
</ul>
<ul class="calc-nav">
<li class="calc">
<a class="link" data-id="form1">Lifetime Value Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form2">Breakeven Analysis</a>
</li>
<li class="calc">
<a class="link" data-id="form3">Total Audience Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form4">Number of Offers Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form5">Margin Calculator</a>
</li>
</ul>
</div>
<div class="col-md-8 forms">
<form id="form1">
<h3>Lifetime Value Calculator</h3>
<p>Calculator which determines the lifetime value of a customer</p>
<p>The average dollar amount of a client's reorder: </p>
<input value="" type="text" class='num1' placeholder="$50.00" />
<p> How many times per year does an average client buy from you? </p>
<input value="" type="text" class='num2' placeholder="12" />
<p> On average, how many years does a client continue doing business with you? </p>
<input value="" type="text" class='num3' placeholder="6" />
<p>Customer Lifetime Value: </p>
<input value="" type="text" class='total' placeholder="$3000.00" readonly/>
</form>
<form id="form2">
<h3>Breakeven Analysis Calculator</h3>
<p> Calculator which determines your breakeven analysis</p>
<p> Customer Lifetime Value: </p>
<input value="" type="text" class='num1' placeholder="$3000.00" />
<p> Gross Margin Percentage: </p>
<input value="" type="text" class='num2' placeholder="60.00%" />
<p> Marin Per Customer: </p>
<input value="" type="text" class='total1' placeholder="$1800.00" readonly/>
<p> Monthly Advertising Spend: </p>
<input value="" type="text" class='num3' placeholder="$2000.00" />
<p> Number of Customers to breakeven:
<p>
<input value="" type="text" class='total2' placeholder="1.11" readonly/>
</form>
<form id="form3">
<h3>Total Audience Calculator</h3>
<p>Calculator which determines your total audience</p>
<p> Number of residence mailed: </p>
<input value="" type="text" class='num1' placeholder="50,000" />
<p> Average Number of people per residence: </p>
<input value="" type="text" class='num2' placeholder="4.25" />
<p> Total potential audience </p>
<input value="" type="text" class='total' placeholder="212,500" readonly/>
</form>
<form id="form4">
<h3>Number of Offers</h3>
<p>Calculator which determines your total number of offers</p>
<p>Number of residence mailed: </p>
<input value="" type="text" class='num1' placeholder="50,000" />
<p> Number of Coupons: </p>
<input value="" type="text" class='num2' placeholder="6" />
<p> Total number of coupons </p>
<input value="" type="text" class='total' placeholder="300,000" readonly/>
</form>
<form id="form5">
<h3>Margin Calculator</h3>
<p>Calculator which determines your margins</p>
<p>Revenue: </p>
<input value="" type="text" class='num1' placeholder="$3000.00" />
<p> Cost of Goods Sold: </p>
<input value="" type="text" class='num2' placeholder="$2250.00" />
<p> Margin: </p>
<input value="" type="text" class='total1' readonly placeholder="750.00" readonly/>
<p> Margin Percentage: </p>
<input value="" type="text" class='total2' readonly placeholder="25%.00" readonly/>
</form>
</div>
</div>
To save space I have put this in a fiddle: https://jsfiddle.net/so4y0nb2/15/
I've updated the jsFiddle based on your comment.
This time I took a lot more liberty with what you had and tried to put it together a way I might approach it. It's far from perfect and leaves a lot to be desired, but it should be of some help.
HTML:
<div class="row">
<div class="col-md-4">
<!-- I removed the <ul> and instead created a standalone <a>, I wasn't sure what purpose have everything in a <ul> served -->
Generating Customer Caclulations
<!-- Same container for calculators but I changed the <p> Calculators into an <a> -->
<div id="calc-nav-container">
Calculators
<ul id="calc-nav" class="calculatorList">
<li class="calc">
<a class="link" data-id="form1">Lifetime Value Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form2">Breakeven Analysis</a>
</li>
<li class="calc">
<a class="link" data-id="form3">Total Audience Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form4">Number of Offers Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form5">Margin Calculator</a>
</li>
</ul>
</div>
</div>
<!-- the forms start here... -->
</div>
CSS:
#calc-nav-container,
#forms,
#forms form,
#calc-nav {
display: none;
}
#calc-nav-container.open,
#forms.open,
#forms form.open,
#calc-nav.open {
display: block;
}
jQuery:
$(document).ready(function(){
// Instead of hiding elements on document ready, I set the them to display none in CSS
// Prevent default behavior of anchors with #
$("a[href='#']").on('click', function(e){
e.preventDefault();
})
})
// When 'Generating Customer Calculations' is clicked
$('#gen-cust-calc').on('click', function(){
// Show both the calculator container and the first button
$('#calc-nav-container, #calc-button').toggleClass('open');
});
// When 'Calculators' is clicked
$('#calc-button').on('click', function(){
$('#calc-nav, #forms').toggleClass('open');
});
// Handle click for calculators
$("#calc-nav li a").on("click", function() {
toggleForms($(this).data("id"));
});
// I like to use classes instead of the .show() or .hide() methods because I don't like the inline styles they add
function toggleForms(id) {
// Remove any open class
$('#forms form').removeClass('open');
// Toggle open on the clicked form
$('#' + id).toggleClass('open');
}
Related
I'm using toggle() but it's not working. My script is in the footer:
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").toggle();
});
});
or I've also tried addClass():
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
Basically I'm just trying to toggle between showing and hiding the form divs.
When product-suggestion-form-container is clicked on, form-div-top should show.
When contact-us-form-container is clicked on, form-div-bottom should show.
Then they should hide when those divs are clicked on again.
Shouldn't clicking on product-suggestion-form-container cause form-div-top to become active and therefore to display: flex? Not sure why nothing's happening.
I was just getting the jQuery from here, but ideally I'd like to add a smooth transition and whatever other best practices you might suggest for doing this.
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
.form-div-outer {
margin: 10px 0;
}
.form-div-top,
.form-div-bottom {
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
/*initial display*/
.form-div-inner-top {
display: none;
}
.form-div-inner-bottom {
display: none;
}
.form-div-inner-top:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-div-inner-bottom:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-input {
margin: 10px 0;
padding: 5px;
border: none;
background-color: #ffffff;
width: 100%;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
<div class="form-div-outer">
<div class="contact-us-form-container">
<span class="form-title">Contact Us Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-bottom">
<form class="form-div-inner-bottom">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group input-group-contact-reason">
<div class="contact-reason-container">
<ul class="radiolist">
<li>
<input class="radio" type="radio"><label>Order question</label>
<input class="radio" type="radio"><label>Website feedback</label>
<input class="radio" type="radio"><label>Trouble finding product</label>
</li>
</ul>
</div>
</span>
</form>
</div>
</div>
It seems you have forgot .s in your code to access the data.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle();
});
});
Here's my website: http://library.bennington.edu. We use domtabs to organize our search boxes. We're switching cataloging software, so I'm trying to replace the catalog search box with a new search box from Ebsco Discovery Services (EDS). EDS provides their own code, so I didn't have to write anything, should just be cut and paste. But when I drop the new code in, nothing appears at all, just a total blank space. If I place the code BELOW the domtabs box, it works fine. It just blanks when placed within the domtabs box, as if there's some conflict. Here's the relevant DomTab code section:
<div class="domtab">
<ul class="domtabs">
<li><a style="border-top-left-radius:9px" href="#catalog">Catalog</a></li>
<li>Journals</li>
<li>Databases</li>
<li>Reserves</li>
<li>Reference</li>
<li><a style="border-top-right-radius:9px" href="#archive">Archive</a></li>
</ul>
<div>
<h2><a name="#catalog" id="catalog"></a></h2>
<table width="425px">
<tr>
<td valign="top" width="70%">
<!--Insert new code here-->
<!--Code Ends here-->
<span>Search the library's holdings for books, ebooks, movies, music recordings, and more.</span>
<form action="http://library.bennington.edu/search/Y" method="get" style="display:block; padding: 2px 0px; margin: 0;">
<input style="border-radius:3px" type="text" name="SEARCH" size="35" value="" />
<input type="hidden" name="SORT" value="A" />
<script language="javascript">
function iiiDoSubmit_1() {
var name = "iiiFormHandle_1";
if (document.getElementById)
obj = document.getElementById(name);
else if (document.all)
obj = document.all[name];
else if (document.layers)
obj = document.layers[name];
obj.form.submit();
}
</script>
<input type="hidden" id="iiiFormHandle_1"/>
<a href=# onclick="iiiDoSubmit_1();">
<input style="border-radius:3px; width:50px; margin-top:3px; padding:2px; font-size:11px" value="Search" type="Submit" />
</a>
</form>
</td>
<td valign="top" align="right">
<span class="roundedContentInfo">
<span style="font-size:130%; border-bottom:1px solid #000; text-align:left;"><b>Other Searches</b></span>
<span>Advanced </span>
<span>Title </span>
<span>Author </span>
<span>Author & Title </span>
</span>
</td>
</tr>
</table>
</div>
And here's the code that should be dropped in:
<script src="http://support.ebscohost.com/eit/scripts/ebscohostsearch.js" type="text/javascript"></script>
<style type="text/css">
.choose-db-list{ list-style-type:none;padding:0;margin:10px 0 0 0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt;width:340px; }
.choose-db-check{ width:20px;float:left;padding-left:5px;padding-top:5px; }
.choose-db-detail{ margin-left:30px;border-left:solid 1px #E7E7E7;padding:5px 11px 7px 11px;line-height:1.4em; }
.summary { background-color:#1D5DA7;color:#FFFFFF;border:solid 1px #1D5DA7; }
.one { background-color: #FFFFFF;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.two { background-color: #F5F5F5;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.selected { background-color: #E0EFF7;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
#ebscohostCustomSearchBox #disciplineBlock { width:auto; }
#ebscohostCustomSearchBox .limiter { float:left;margin:0;padding:0;width:50%; }
#ebscohostsearchtext { width: 144px; }
#ebscohostsearchtext.edspub { width: 245px; }
.ebscohost-search-button.edspub {
border: 1px solid #156619;
padding: 5px 10px !important;
border-radius: 3px;
color: #fff;
font-weight: bold;
background-color: #156619;
}
.ebscohost-title.edspub {
color: #1c7020;
font-weight: bold;
}
</style>
<form id="ebscohostCustomSearchBox" action="" onsubmit="return ebscoHostSearchGo(this);" method="post" style="width:340px; overflow:auto;">
<input id="ebscohostwindow" name="ebscohostwindow" type="hidden" value="1" />
<input id="ebscohosturl" name="ebscohosturl" type="hidden" value="http://0-search.ebscohost.com.library.bennington.edu/login.aspx?direct=true&site=eds-live&scope=site&type=0&mode=bool&lang=en&authtype=cookie,ip" />
<input id="ebscohostsearchsrc" name="ebscohostsearchsrc" type="hidden" value="db" />
<input id="ebscohostsearchmode" name="ebscohostsearchmode" type="hidden" value="+" />
<input id="ebscohostkeywords" name="ebscohostkeywords" type="hidden" value="" />
<div style="background-image:url('http://support.ebscohost.com/images/logos/eds100.gif'); background-repeat:no-repeat; height:50px; width:340px; font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt; color:#353535;">
<div style="padding-top:5px;padding-left:115px;">
<span class="ebscohost-title " style="font-weight:bold;">Research databases</span>
<div>
<input id="ebscohostsearchtext" class="" name="ebscohostsearchtext" type="text" size="23" style="font-size:9pt;padding-left:5px;margin-left:0px;" />
<input type="submit" value="Search" class="ebscohost-search-button " style="font-size:9pt;padding-left:5px;" />
<div id="guidedFieldSelectors">
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_0" value="" checked="checked" />
<label class="label" for="guidedField_0"> Keyword</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_1" value="TI" />
<label class="label" for="guidedField_1"> Title</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_2" value="AU" />
<label class="label" for="guidedField_2"> Author</label>
</div>
</div>
</div>
</div>
<div id="limiterblock" style="margin-left:-px; overflow: auto; ">
<div id="limitertitle" style="font-weight:bold;padding-top:25px;padding-bottom:5px;">Limit Your Results</div>
<div class="limiter" >
<input type="checkbox" id="chkFullText" name="chkFullText" checked="checked" />
<label for="chkFullText">Full Text</label>
</div>
<div class="limiter" >
<input type="checkbox" id="chkLibraryCollection" name="chkLibraryCollection" />
<label for="chkLibraryCollection">Available in Library Collection</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkPeerReviewed" name="chkPeerReviewed" />
<label for="chkPeerReviewed">Peer Reviewed</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkCatalogOnly" name="chkCatalogOnly" />
<label for="chkCatalogOnly">Catalog Only</label>
</div>
</div>
</form>
I've moved the javascript call to the top of the page, and moved the CSS to my CSS page to thin out the code, but still just getting the domtab box with normal background color as if nothing is there. :-/
I am trying to select the text, on text select or list select the radio button should be selected automatically by the jquery code but its looping between the last two radio buttons only
note: i want only one selection should be made between 5 radio button on list selection
Here is my code:
$('.saved_card .customerid').click(function() {
$('.glyphicon-ok').removeClass('glyphicon-ok');
$('.saved_card .selected_radio').removeClass('selected_radio');
$("i", this).toggleClass('glyphicon-ok');
$(this).toggleClass('selected_radio');
$('input[type="radio"]').not(':checked').prop("checked", true);
});
And my jsfiddle is here.
Please use HTML5 label element like this:
<ul class="saved_card">
<li class="customerid">
<label for="cust1">Savings account-***4443<i class="form-control-feedback glyphicon"></i></label>
<input type="radio" name="customer" value="cust1" id="cust1">
</li>
<li class="customerid">
<label for="cust2">Savings account-***4443<i class="form-control-feedback glyphicon"></i></label>
<input type="radio" name="customer" value="cust2" id="cust2">
</li>
</ul>
You don't need javascript to do this.
Yes, you can use label tag like André Senra says
$('.saved_card .customerid').click(function() {
$('.glyphicon-ok').removeClass('glyphicon-ok');
$(this).addClass('glyphicon-ok');
$('.selected_radio').removeClass('selected_radio');
$(this).addClass('selected_radio');
$('input[type="radio"]').prop("checked", false);
$(this).find('input[type="radio"]').prop("checked", true);
});
ul.saved_card li i {
height: 48px;
line-height: 48px;
font-size: 17px;
font-weight: lighter;
margin-right: 10px;
color: #f00f64;
}
ul.saved_card li {
height: 50px;
border: 0;
border-bottom: 1px solid #fafafa;
background-color: #fff;
border-radius: 0;
box-shadow: none;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="saved_card">
<li class="customerid">
<input type="radio" name="customer" value="cust1" id="cust1">Savings account-***4443<i class="form-control-feedback glyphicon"></i>
</li>
<li class="customerid">
<input type="radio" name="customer" value="cust2" id="cust2" checked>Savings account-***4212<i class="form-control-feedback glyphicon glyphicon-ok"></i>
</li>
<li class="customerid">
<input type="radio" name="customer" value="cust3" id="cust3" checked>Savings account-***4212<i class="form-control-feedback glyphicon glyphicon-ok"></i>
</li>
<li class="customerid">
<input type="radio" name="customer" value="cust4" id="cust4" checked>Savings account-***4212<i class="form-control-feedback glyphicon glyphicon-ok"></i>
</li>
<li class="customerid">
<input type="radio" name="customer" value="cust5" id="cust5" checked>Savings account-***4212<i class="form-control-feedback glyphicon glyphicon-ok"></i>
</li>
</ul>
And jsfiddle is here
https://jsfiddle.net/svp4msfu/1/
Change last line to this:
$('input[type="radio"]', $(this)).not(':checked').prop("checked", true);
Though you should rather do as Andre suggests, and use a label.
How can i align spacing between form inputs, labels, text area and the received data from php. Which may have multiple lines of data to display. How can i achieve the auto arrangement of next elements if something is added in the middle.?
Here is the code: (How can to make auto arrangement? is there a better way achieving it than the below code? )
li{text-decoration:none; list-style-type:none; }
.left{ position:relative; left:100px;}
.right{ position:relative; left:200px;}
textarea{ position:relative; width:200px; height:70px; }
<html>
<body>
<br><br>
<form>
<ul>
<label class="left">Status:</label><li class="right"><textarea name="status"></textarea></li><br><br>
<label class="left">First name:</label><li class="right"><input type="text" name="firstname"></li><br><br>
<label class="left">Last name:</label><li class="right"><input type="text" name="lastname"></li><br><br>
<label class="left">Address:</label><li class="right"><textarea name="address"></textarea></li><br><br>
<label class="left">Address 2:</label><li class="right"><textarea name="address2"></textarea></li>
</ul>
</form>
</body>
</html>
You could solve just using CSS flexbox.
display: flex for each li, some flex-basis for each label (in this case 25% and add a class for each input (such as textarea, etc) with flex: 1.
document.querySelector('#add').addEventListener('click', function() {
var elem = document.createElement('li');
elem.innerHTML = '<label>Lorem Ipsum</label><input type="text" class="field" />';
document.querySelector('#list').appendChild(elem);
})
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
margin-bottom: .5em;
}
label {
flex: 0 0 25%;
text-align: right;
padding-right: 1em;
align-self: center;
}
.field {
flex: 1;
}
<ul id=list>
<li>
<label for=status>Status:</label>
<textarea class="field" id=status name="status"></textarea>
</li>
<li>
<label for=firstname>First name:</label>
<input class="field" id=firstname type="text" name="firstname">
</li>
<li>
<label for=lastname>Last name:</label>
<input class="field" id=lastname type="text" name="lastname">
</li>
<li>
<label for=address>Address:</label>
<textarea class="field" id="address" name="address"></textarea>
</li>
<li>
<label for=address2>Address 2:</label>
<textarea class="field" id="address2" name="address2"></textarea>
</li>
</ul>
<button id=add>Add</button>
Also added a for="..." attribute to have the right behaviour when click on a label (will focus on the related input).
Here is my fiddle
http://jsfiddle.net/LTpL6/
Code:
<ul class="tabs_down_link">
<li ><a style=" padding: 7px 14px;font-size: 16px; color: #000; border- bottom:1px solid #FFFFFF;" href="#view_down7">Subject Area-Based Citations</a></li>
<li >Sub-Area Based Citations</li>
</ul>
<div class="tabcontents_down_link">
<div id="view_down7" style="line-height:180%; font-size: 14px;font-weight: bold; color: #808080; ">
<input type="checkbox" /> (SciCI)<br/>
<input type="checkbox" /> (SS&HCI)<br/>
<input type="checkbox" /> (M&HSCI) <br/>
<input type="checkbox" /> (LSciCI)<br/>
</div>
<div id="view_down8" style="font-weight: bold;line-height:180%; font-size: 14px; color: #808080;">
<input type="checkbox" /> History Citation Index<br/>
<input type="checkbox"/> Religion Citation Index<br/>
<input type="checkbox" /> Biotechnology Citation Index<br/>
<input type="checkbox" /> Food Science Citation Index<br/>
<input type="checkbox" /> Chemistry Citation Index<br/>
<input type="checkbox" /> Mathematics Citation Index<br/>
<input type="checkbox" /> Neuroscience Citation Index<br/>
<input type="submit" class="search-butt" style="margin-left: 727px; float: left;" name="submit_docu" value="Search" /><br/>
</div>
</div>
Jquery
$(document).ready(function () {
$('div[id^=view_down]').hide();
$('#view_down7').show();
$('.tabs_down_link a').click(function () {
var tab_id = $(this).attr('href');
var now = $(this).attr('.tabs_down_link a');
$('div[id^=view_down]').hide();
$(tab_id).show();
});
});
Here everything works fine.
Now there are two tabs
1.Subject Area-Based Citations
2.Sub-Area Based Citations
There is a common div where user click clicks on any the specific tab the content would be shown in that common div, now its showing correctly, but i need the tab names to be be changed according to the clicked tab.
So now the default is Subject Area-Based Citations tab, so when user tries to click on Sub-Area Based Citations then the tab name 'Sub-Area Based Citations' should automatically come to the first default tab.
How to do that please help.
You can interchange the positions using this
$(this).before($('div[id^=view_down]'));