I have a product split into two sections: Image and Description. The image is linked using however the Description is not. since it is dynamic I am wondering how can I get this URL and using JS to assign it to the description box?
<div class="item__media">
<div class="item__image">
<a href="http://prototype.aaa.com" title="" class="product-image item__link">
<img src="http://a4.res.cloudinary.com//image/upload/c_pad,dpr_1.0,f_auto,h_221,q_80,w_303/damson_108170_1_2_2.jpg" alt="image">
</a>
</div>
<div class="item__detail">
<a href="http://prototype.aaa.com" title="Description" class="item__link">
<p class="product-name item__name">Product 15252</p>
</a>
</div> </div></div>
<div class="price-box">
<p class="old-price">
<span class="price-label">Was</span>
<span class="price" id="old-price-7139">
<span class="price"><span class="currency">£</span>179</span> </span>
</p>
<p class="special-price">
<span class="price-label">You Save</span>
<span class="price" id="price-excluding-tax-7139">
<span class="price"><span class="currency">£</span>90</span> </span>
</p>
</div>
<div class="price-range">
<span class="price-label" style="display: none;">From </span><span class="price-label">SHOP FROM</span>
<span class="price"><span class="price"><span class="currency">£</span>89</span></span>
</div>
</div>
</div>
Thanks N
Related
I have a group of spans in a div that I'm try to match and move to a corresponding id.
Each span has a data attribute that matches the parent ID of the target. I'm trying to use jQuery to match the data attributes in the spans and then append them before a separate span in the parent div ID's.
Here's my code:
HTML
<div id="id-expand-2">
<a class="thing" href="#">
<div class="item-title">
<span>Title 1</span>
</div>
</a>
</div>
<div id="id-expand-4">
<a class="thing" href="#">
<div class="item-title">
<span>Title 2</span>
</div>
</a>
</div>
<div id="id-expand-6">
<a class="thing" href="#">
<div class="item-title">
<span>Title 3</span>
</div>
</a>
</div>
<div class="vid-imgs">
<span class="item" data-item="id-expand-2"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span class="item" data-item="id-expand-4"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span class="item" data-item="id-expand-6"><img src="https://www.fillmurray.com/g/140/100" /></span>
</div>
Basically, each span that is in the vid-imgs class with the data-item would match to the ID of the parent divs and then do an .append() right after the item-title class.
So the intended output would be something like this:
<div id="id-expand-2">
<a class="thing" href="#">
<div class="item-title">
<span class="item" data-item="id-expand-2"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span>Title 1</span>
</div>
</a>
</div>
<div id="id-expand-4">
<a class="thing" href="#">
<div class="item-title">
<span class="item" data-item="id-expand-4"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span>Title 2</span>
</div>
</a>
</div>
<div id="id-expand-6">
<a class="thing" href="#">
<div class="item-title">
<span class="item" data-item="id-expand-6"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span>Title 3</span>
</div>
</a>
</div>
I'm not sure how to match each of those overall.
I was thinking of using each like this:
$(".vid-imgs").each(function () {
var items = $(".item").attr("data-item");
console.log(items);
});
But that only seems to grab the first item in the vid-imgs div. I feel like I've done this before, but I've been starting at this thing all day, and I think I need to give my eyes a break.
Few things:
$(".item").attr("data-item"); is getting the value of the data-item attribute of the .item. If you want to select the item with a specific id, you can use the CSS id selector
You should be looping through the spans inside .vid-imgs, not .vid-imgs itself
$(".vid-imgs span").each(function () {
var items = $("div#"+$(this).data('item'))
items.append(this.cloneNode(true))
this.remove() //remove the span
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="id-expand-2">
<a class="thing" href="#">
<div class="item-title">
<span>Title 1</span>
</div>
</a>
</div>
<div id="id-expand-4">
<a class="thing" href="#">
<div class="item-title">
<span>Title 2</span>
</div>
</a>
</div>
<div id="id-expand-6">
<a class="thing" href="#">
<div class="item-title">
<span>Title 3</span>
</div>
</a>
</div>
<div class="vid-imgs">
<span class="item" data-item="id-expand-2"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span class="item" data-item="id-expand-4"><img src="https://www.fillmurray.com/g/140/100" /></span>
<span class="item" data-item="id-expand-6"><img src="https://www.fillmurray.com/g/140/100" /></span>
</div>
I am working on one of the requirement, where I have to show div based on user input. Below is the code structure.
<input id="location-filter" type="text">
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title"></h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>London</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title"></h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>Canada</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
There are two 'item' divs, the difference is only 'item-location' div, containing p tag of location names. If user enters 'London', I want to show all 'item' divs which contain text 'london' and hide other 'item' divs. I tried the below code, but no luck. Any help would be appreciated. Thank you.
$("#location-filter").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
// Loop through the div
$('.item > .item-location p').each(function() {
// If the list item does not contain the text phrase fade it out
if ($("this").text().search(new RegExp(filter, "i")) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
});
I think the problem is with your CSS selector in the Jquery.
$('.item .item-location p')
should be right. This is because with the arrow, it is looking for an element with "item-location" directly under an element with the class "item" which it is not able to find.
Your code had some mistakes. The > is used to select the direct child. .item has no .item-location element as direct child. That is why, each iterator wasn't running at all. Besides that, the this in the if condition is wrapped inside double quotes, making it a string. And the last mistake was that, in the each loop, this refers to the element being iterated. To hide or show the .item, you've to use closest to reach the ancestor .item
$("#location-filter").keyup(function() {
var filter = $(this).val(),
count = 0;
$('.item .item-location p').each(function() {
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).closest('.item').hide();
} else {
$(this).closest('.item').show();
count++;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="location-filter" type="text">
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title">
</h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>London</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title">
</h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>Canada</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
I'm new to this section. I'm using a wordpress homepage and use wpbakery for creating my content.
My specific problem is that I have an accordion but cannot open it automatically.
That's what I did: created an accordion with different tabs. I wanna use a link like test.com\accordion#tab2 open the side and automatically the right tab2 of the accordion. Anyone know the code of JS I could use to solve this?
<div class="wpb_column vc_main_column vc_column_container vc_col-sm-12 typo-default">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="vc_tta-container" data-vc-action="collapse">
<div class="vc_general vc_tta vc_tta-tabs vc_tta-color-grey vc_tta-style-classic vc_tta-shape-rounded vc_tta-spacing-1 vc_tta-tabs-position-top vc_tta-controls-align-left">
<div class="vc_tta-tabs-container">
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab vc_active" data-vc-tab="">
<a href="#tabid1" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 1</span>
</a>
</li>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#tabid2" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 2</span>
</a>
</li>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#tabid3" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 3</span>
</a>
</li>
</ul>
</div>
<div class="vc_tta-panels-container">
<div class="vc_tta-panels">
<div class="vc_tta-panel vc_active" id="tabid1" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid1" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 1</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text1</p>
</div>
</div>
</div>
</div>
<div class="vc_tta-panel" id="tabid2" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid2" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 2</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text2</p>
</div>
</div>
</div>
</div>
<div class="vc_tta-panel" id="tabid3" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid3" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 3</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="height: 0px;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text3</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have design a flight search listing page in HTML.
Now want to show/hide (slidUp/slideDown) the next div on button click.
Here my html markup:
http://qubedns.co.in/codes/design/rnp/flight-listing-1.html
HTML CODE:
<td class="flight-list">
<!-- FLIGHT 1 --->
<div class="flights">
<div class="flight-box">
<div class="row">
<div class="col-sm-3">
<div class="flight-info">
<div class="left-i">
<img src="img/sp_trans.gif" class="airsprite airlogo A10">
<div class="flight-no">SG-264</div>
</div>
<div class="right-i">
<div class="name">Air India</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="flight-duration">
<div class="row">
<div class="col-sm-4">
<div class="events">
<span class="text">Depart</span>
<span class="time">12:30 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Arrive</span>
<span class="time">03:10 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Duration</span>
<span class="time">1h 40m </span>
<span class="route">No Stop</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="fare-price">
<div class="row">
<div class="col-sm-6">
<span class="f-price">3999</span>
</div>
<div class="col-sm-6">
<div class="book-action">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
<button type="button" class="btn text-primary btn-more" name="details">View More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flight-footer">
<div class="row">
<div class="col-sm-3">
<div class="refund-status">
<span>Refundable</span>
</div>
</div>
<div class="col-sm-3">
<div class="fare-role">
Fare rules
</div>
</div>
<div class="col-sm-3">
<div class="baggage-info">
Baggage Information
</div>
</div>
<div class="col-sm-3">
<div class="itinerary-info">
Flight itinerary
</div>
</div>
</div>
</div>
<div class="flight-itinerarySummary">
<div class="row">
<div class="col-sm-12">
<h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i>
<abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
<div class="connector weak">
<small class="layOver">Layover : 5h 20m</small>
</div>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i>
<abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- FLIGHT 1 END -->
<!-- FLIGHT 2 -->
<div class="flights">
<div class="flight-box">
<div class="row">
<div class="col-sm-3">
<div class="flight-info">
<div class="left-i">
<img src="img/sp_trans.gif" class="airsprite airlogo A10">
<div class="flight-no">SG-264</div>
</div>
<div class="right-i">
<div class="name">Air India</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="flight-duration">
<div class="row">
<div class="col-sm-4">
<div class="events">
<span class="text">Depart</span>
<span class="time">12:30 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Arrive</span>
<span class="time">03:10 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Duration</span>
<span class="time">1h 40m </span>
<span class="route">No Stop</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="fare-price">
<div class="row">
<div class="col-sm-6">
<span class="f-price">3999</span>
</div>
<div class="col-sm-6">
<div class="book-action">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
<button type="button" class="btn text-primary btn-more" name="details">View More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flight-footer">
<div class="row">
<div class="col-sm-3">
<div class="refund-status">
<span>Refundable</span>
</div>
</div>
<div class="col-sm-3">
<div class="fare-role">
Fare rules
</div>
</div>
<div class="col-sm-3">
<div class="baggage-info">
Baggage Information
</div>
</div>
<div class="col-sm-3">
<div class="itinerary-info">
Flight itinerary
</div>
</div>
</div>
</div>
<div class="flight-itinerarySummary">
<div class="row">
<div class="col-sm-12">
<h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i>
<abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
<div class="connector weak">
<small class="layOver">Layover : 5h 20m</small>
</div>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i>
<abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- FLIGHT 2 END -->
</td>
I want to slideUp & SlideDown (Toggle) 'flight-itinerarySummary' div on 'btn-more' on click. Also, if any one 'flight-itinerarySummary' is slideDown, all others rows 'flight-itinerarySummary' will slideUp(hide).
I have include Jquery v2.1.1 at html section.
Plz help me anyone to build this on jquery.
Try this:
$(this).next() gets the next element.
$('.btn text-primary btn-more').click(function () {
$('div.flightitinerarySummary').slideUp();
$(this).next('div.flight-itinerarySummary').slideToggle();
return false;
});
You can check whether element is visible or not and then slide down or slide up the div as following.
$(document).ready(function(e) {
$(".btn-more").click(function(){
$('.flight-itinerarySummary').slideUp();
if($(this).closest('.flight-box').siblings('.flight-itinerarySummary').is(":visible")){
$(this).closest('.flight-box')
.siblings('.flight-itinerarySummary')
.slideUp();
}else{
$(this).closest('.flight-box')
.siblings('.flight-itinerarySummary')
.slideDown();
}
});
});
If you want, you can hide all divs with class flight-itinerarySummary at start by adding following style.
<style>
.flight-itinerarySummary{
display:none;
}
</style>
JSFiddle
You can do this like following
$('.btn-more').click(function() {
$(this).closest('.flight-box')
.siblings('.flight-itinerarySummary')
.slideToggle();
})
UPDATE:
$('.btn-more').click(function() {
var nextItiner = $(this).closest('.flight-box').siblings('.flight-itinerarySummary');
if(nextItiner.is(':visible')){
nextItiner.slideUp();
}
else {
nextItiner.slideDown();
}
$('.flight-itinerarySummary').not(nextItiner[0]).each(function(){
$(this).hide();
});
})
In my form there are 4 links when they clicked content of my div tag is shown using jQuery.
My question is, when link is clicked I want to pass name of that link to that div tag, how is it possible?
$("#adduser").click(function() {
$("#add").toggle("slow");
});
<div class="box-content" id="adduser">
<a class="quick-button span2" href="#">
<i class="icon-group"></i>
<p>Add Mentors</p>
<span class="notification green">167</span>
</a>
<a class="quick-button span2" href="#">
<i class="icon-group"></i>
<p>Add Students</p>
</a>
<a class="quick-button span2" href="#">
<i class="icon-group"></i>
<p>Add Faculties</p>
</a>
<a class="quick-button span2" href="#">
<i class="icon-group"></i>
<p>Add Faculty Advisors</p>
</a>
</div>
<div class="row-fluid sortable " id="add" style="display: none">
<div class="box span12">
<div class="box-header" data-original-title>
<h2><i class="halflings-icon white edit"></i><span class="break"></span>Add new User</h2>
<div class="box-icon">
<i class="halflings-icon white chevron-up"></i>
<i class="halflings-icon white remove"></i>
</div>
</div>
<div class="box-content">
<form enctype='multipart/form-data' method="post" class="form-horizontal" action="">
<div class="control-group">
<label class="control-label" for="fileInput">Select file</label>
<div class="controls">
<input class="input-file uniform_on" id="file" name="file" type="file">
<input type="submit" class="blue btn" value="Add">
</div>
<br>
<div class="controls">
Or add single user
</div>
</div>
</form>
</div>
</div>
</div>
I've just changed the header to print out the pressed link name.
hope that's help
$(function() {
$(".quick-button").click(function(event) {
$("h2").text($(event.target).text());
$("#add").toggle("slow");
});
});
<div class="box-content" id="adduser">
<a class="quick-button span2" href="#">
<i class="icon-group"></i>
<p>Add Mentors</p>
<span class="notification green">167</span>
</a>
<a class="quick-button span2" href="#">
<i class="icon-group"></i>
<p>Add Students</p>
</a>
<a class="quick-button span2" href="#">
<i class="icon-group"></i>
<p>Add Faculties</p>
</a>
<a class="quick-button span2" href="#">
<i class="icon-group"></i>
<p>Add Faculty Advisors</p>
</a>
</div>
<div class="row-fluid sortable " id="add" style="display: none">
<div class="box span12">
<div class="box-header" data-original-title>
<h2><i class="halflings-icon white edit"></i><span class="break"></span>Add new User</h2>
<div class="box-icon">
<i class="halflings-icon white chevron-up"></i>
<i class="halflings-icon white remove"></i>
</div>
</div>
<div class="box-content">
<form enctype='multipart/form-data' method="post" class="form-horizontal" action="">
<div class="control-group">
<label class="control-label" for="fileInput">Select file</label>
<div class="controls">
<input class="input-file uniform_on" id="file" name="file" type="file">
<input type="submit" class="blue btn" value="Add">
</div>
<br>
<div class="controls">
Or add single user
</div>
</div>
</form>
</div>
</div>
</div>
I am not sure if you are looking for this . Can you pls check ..
$("a").click(function(){
// Get Link Name Attribute
var LinkName=$(this).attr("name");
//Get Link Text/Value
var LinkText=$(this).text();
//Display for demo
alert(LinkName+'\n'+LinkText);
//Display LinkText in SomeDiv
$('#SomeDiv').text(LinkText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Link Text<hr/>
<div id="SomeDiv"></div>