I'm trying to make 1 button show two divs when I click it using jquery.
So on click of button #show1 I want div #cybernetics + div .gif1 to appear and on click on button #show2 I want div #eat + div .gif2 to appear
Is it possible? thank you!
currently I have the following code
$('document').ready(function() {
$('#show1, #show2, #show3').click( function() {
var $div = $('#' + $(this).data('href'));
$('.demo').not($div).hide();
$div.fadeToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>
<div id="cybernetics" class="demo">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="gif1">
<img src="cybernetics.gif">
</div>
<div id="eat" class="demo">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="gif2">
<img src="eat.gif">
</div>
Simply you can show hide as per button click as bewlo.
$('.gif1, .gif2, #cybernetics, #eat').hide();
$('document').ready(function() {
$('#show1').click( function() {
$('.gif1, .gif2, #cybernetics, #eat').hide();
$('#cybernetics').show();
$('.gif1').show();
});
$('#show2').click( function() {
$('.gif1, .gif2, #cybernetics, #eat').hide();
$('#eat').show();
$('.gif2').show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>
<div id="cybernetics" class="demo">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="gif1">
<img src="cybernetics.gif">
</div>
<div id="eat" class="demo">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="gif2">
<img src="eat.gif">
</div>
I assume from the logic you're trying to keep this DRY, so you don't want multiple event handlers. As such you can select the target element based on the data-href attribute of the clicked button, then get the next() element from that and fade them both in, something like this:
$('document').ready(function() {
$('.toggle').click(function() {
var $div = $('#' + $(this).data('href'));
$('.demo').not($div).hide().next().hide();
$div.add($div.next()).fadeToggle();
});
});
.demo,
.demo + div {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" class="toggle" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" class="toggle" data-href="eat"><h2> ></h2></button>
<div id="cybernetics" class="demo">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="gif1">
<img src="cybernetics.gif">
</div>
<div id="eat" class="demo">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="gif2">
<img src="eat.gif">
</div>
You can make change to below code
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>
<div class="allBox cybernetics" style="display: none;">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="allBox cybernetics" style="display: none;">
<img src="cybernetics.gif">
</div>
<div class="allBox eat" style="display: none;">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="allBox eat" style="display: none;">
<img src="eat.gif">
</div>
and your js code goes here
<script type="text/javascript">
$("#show1").on('click', function(){
hrefVal = $(this).attr('data-href');
$(".allBox").css('display', 'none');
$("."+hrefVal).css('display', 'block');
})
$("#show2").on('click', function(){
hrefVal = $(this).attr('data-href');
$(".allBox").css('display', 'none');
$("."+hrefVal).css('display', 'block');
})
</script>
This is a solution maintaining your data structure and name convention.
I also fix a bug when clicking multiple times on the same button would fade in and out the right items.
$('document').ready(function() {
$('#show1, #show2, #show3').click( function() {
var target = $(this).data('href');
var $div = $('#' + target);
$('.demo').not($div).hide();
$(".gif img:not([src^='"+target+"'])").hide();
$(".gif img[src^='"+target+"']").show();
$div.fadeIn();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>
<div id="cybernetics" class="demo">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="gif">
<img src="cybernetics.gif">
</div>
<div id="eat" class="demo">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="gif">
<img src="eat.gif">
</div>
Related
Starting with this:
<div class="outside">
<div class="container">
</div>
</div>
</div>
<div class="outside">
<div class="container">
</div>
</div>
<div class="outside">
<div class="container">
</div>
</div>
What I am trying to achieve:
<div class="outside">
<a href="link1" class="overlay">
<div class="container">
</div>
</a>
</div>
<div class="outside">
<a href="link2" class="overlay">
<div class="container">
</div>
</a>
</div>
<div class="outside">
<a href="link3" class="overlay">
<div class="container">
</div>
</a>
</div>
Needs to work if for any number of ".container" divs. I'm guessing I should be putting the inner hrefs into an array but I'm getting stuck on how to insert the values into the overlay wraps.
Here's one of my attempts:
var arr = $('.container a').map(function() {
return this.href;
}).toArray();
$('.outside').each(function() {
.wrapInner( '<a href=' + arr + '></a>' );
});
You are almost success,just need to using index to get the right link attribute
var links = $('.container a').map(function() {
return $(this).attr("href");
}).toArray();
$(".outside").wrapInner(i => {
return "<a class='overlay' href='"+links[i]+"'></div>";
});
// test data
$(".outside").each((i,e) => {
console.log("------------------")
console.log(e.outerHTML)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outside">
<div class="container">
Link 1
</div>
</div>
<div class="outside">
<div class="container">
Link 2
</div>
</div>
<div class="outside">
<div class="container">
Link 3
</div>
</div>
Here is a solution with Vanilla JavaScript.
Create an anchor tag
let anchor = document.createElement("a")
Get all the elements with className "outside"
let outside = document.querySelectorAll(".outside")
call a for each for them
outside.forEach( function(element, index) {
anchor.classList.add("overlay")
anchor.setAttribute("href", `link${index+1}`)
let container = element.children[0]
anchor.appendChild(container)
element.prepend(anchor)
console.log(element.outerHTML)
});
I have a HTML structure like below. I need to get the header content and description content.
<div id="results">
<div class="ui list">
<div class="item">
<div class="content">
<a class="header" onclick=" toMaker(event, 967)">Mahachai Holding</a>
<div class="description">Lat Phrao, Bangkok, 10230</div>
</div>
</div>
</div>
</div>
I have used following code
$('#results > .ui.list')[0].childNodes[0].childNodes[1].innerHTML
to get the string like
"<a class="header" onclick=" toMaker(event, 967)">MahachaiHolding</a><div class="description">Lat Phrao, Bangkok, 10230</div>"
But now I am confused about how to get header name and description name?
You need to find the .html() of the .header and .description
const $content = $("#results .ui.list .item .content");
console.log($content.find(".header").html());
console.log($content.find(".description").html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
<div class="ui list">
<div class="item">
<div class="content">
<a class="header" onclick=" toMaker(event, 967)">Mahachai Holding</a>
<div class="description">Lat Phrao, Bangkok, 10230</div>
</div>
</div>
</div>
</div>
$('#results > .ui.list')[0].childNodes[0].childNodes[1].innerHTML
$('#results > .ui.list').find('.header') //will get you header element
$('#results > .ui.list').find('.description') //will get you description element
is this what you mean?
https://api.jquery.com/find/
refrence url
Try this...
The output will give only the text of the element not the inner html
/// Get the header text
console.log($('#results .ui.list a.header').text());
/// Get the description text
console.log($('#results .ui.list div.description').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
<div class="ui list">
<div class="item">
<div class="content">
<a class="header" onclick=" toMaker(event, 967)">Mahachai Holding</a>
<div class="description">Lat Phrao, Bangkok, 10230</div>
</div>
</div>
</div>
</div>
Try this...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log($(".content").text())
});
</script>
</head>
<body>
<div id="results">
<div class="ui list">
<div class="item">
<div class="content">
<a class="header" onclick=" toMaker(event, 967)">Mahachai Holding</a>
<div class="description">Lat Phrao, Bangkok, 10230</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have an image gallery. Basically I am trying to go for something that lets the hovered image maintain its styling properties but the background (non-hovered images, I should say) filter to grayscale.
This is my first project and I am trying to push myself. I am making some mistakes but learning from each one. Your help is appreciated.
HTML:
<section id="image-gallery">
<div class="container">
<div id="imageboxing" class="disciplines">
<img src="images/martial-arts-banner/boxing.png">
<div class="imagetext">
<h3>BOXING</h3>
</div>
</div>
<div id="imagekb" class="disciplines">
<img src="images/martial-arts-banner/kickboxing.png">
<div class="imagetext">
<h3>KICKBOXING</h3>
</div>
</div>
<div id="muaythai" class="disciplines">
<img src="images/martial-arts-banner/muaythai.png">
<div class="imagetext">
<h3>MUAYTHAI</h3>
</div>
</div>
<div id="wrestling" class="disciplines">
<img src="images/martial-arts-banner/wrestling.png">
<div class="imagetext">
<h3>WRESTLING</h3>
</div>
</div>
<div class="clear"></div>
</div>
</section>
JQUERY:
$(document).ready(function() {
$(".disciplines img").hover(function(){
var images = $(".disciplines img");
$(this).toggleClass("active-image");
$(this).css("cursor", "pointer");
$(this).next().find('h3').slideToggle();
if (images.not(".active-image") {
$(images).css("filter", blur("20px"));
}
});
You have to do it like below:-
$(document).ready(function() {
$("#image-gallery img").hover(function(){ // on hover of image
$(this).toggleClass("active-image");
$(this).css("cursor", "pointer");
$(this).parent().css({"filter": ""}); //remove it's parent filter css
$('img').not($(this)).parent().css({"filter":'blur(5px)'}); //add filter css to all othe images parent-div apart from thr current clicked-one
}, function () { //when hover-out
$('.disciplines').css({"filter": ""}); //remove filter css from all div
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="image-gallery">
<div class="container">
<div id="imageboxing" class="disciplines">
<img src="https://ae01.alicdn.com/kf/HTB1dizJKFXXXXa_XFXXq6xXFXXXs/Closed-Type-Boxing-Helmet-Head-Protector-For-Taekwondo-Karate-Tai-MMA-Muay-Thai-Kickboxing-Competition-Training.jpg_50x50.jpg">
<div class="imagetext">
<h3>BOXING</h3>
</div>
</div>
<div id="imagekb" class="disciplines">
<img src="http://www.days-gym.com/wp-content/uploads/2015/11/days-gym-website-logo.png">
<div class="imagetext">
<h3>KICKBOXING</h3>
</div>
</div>
<div id="muaythai" class="disciplines">
<img src="https://i.pinimg.com/favicons/50x/ded1fa7e09a93f576a8dc1060fbf82f7e63076e47a08abd0cf27887f.png?ca1416448b5d5bfb6c7465ba2cb5e0d4">
<div class="imagetext">
<h3>MUAYTHAI</h3>
</div>
</div>
<div id="wrestling" class="disciplines">
<img src="https://iawrestle.files.wordpress.com/2017/06/screen-shot-2017-06-14-at-10-35-09-am.png?w=50&h=50&crop=1">
<div class="imagetext">
<h3>WRESTLING</h3>
</div>
</div>
<div class="clear"></div>
</div>
</section>
I'm learning jQuery's hide/show function, and I need to have it so when I click on a div, it shows that div, and hides the other. Right now I have a SUPER janky, and SUPER inefficient way of doing it:
$(document).ready(function(){
$(".FifteenInfo").hide();
$(".FourtyInfo").hide();
$(".SixtyInfo").hide();
$(".FifteenSpecs").hide();
$(".FourtySpecs").hide();
$(".SixtySpecs").hide();
$(".Show15").click(function(){
$(".FifteenInfo").show();
$(".FifteenSpecs").show();
$(".FourtySpecs").hide();
$(".SixtySpecs").hide();
$(".FourtyInfo").hide();
$(".SixtyInfo").hide();
});
});
My HTML:
<div class="buttons">
<button class="buttonText Show15" width="200" height="300">DSL 6</button>
<button class="buttonText Show40" width="200" height="300">DSL 10</button>
<button class="buttonText Show60" width="200" height="300">DSL 15</button>
<button class="buttonText Show40" width="200" height="300">DSL 25</button>
<button class="buttonText Show60" width="200" height="300">DSL 50</button>
</div>
<div class="FifteenInfo border">
<h1 class="Package">DSL 6</h1>
<div class="cableSpacer"></div>
<h3 class="monthlyPrice">\$29.99</h3>
<div class="cableSpacer"></div>
<h3 class="differentbandwidth">\$39.99 Unlimited</h3>
</div>
<div class="FifteenSpecs">
<div class="monthlyUsage">
<h3 style="text-align: center;">Usage</h3>
<h1 class="Usage">150</h1>
<p class="Gigabyte">GB</p>
</div>
<div class="Download">
<h3 style="text-align: center;">Download</h3>
<h1 class="Usage" style="text-align: center;">6</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="Upload">
<h3 style="text-align: center;">Upload</h3>
<h1 class="Usage" style="text-align: center;">800</h1>
<p class="Megabyte">Kbps</p>
</div>
<div class="orderNow">
<button class="btn btntruespeed orderButton">Order Now!</button>
</div>
</div>
<div class="FourtyInfo border">
<h1 class="Package">DSL 10</h1>
<div class="cableSpacer"></div>
<h3 class="monthlyPrice">\$29.99</h3>
<div class="cableSpacer"></div>
<h3 class="differentbandwidth">\$44.99 Unlimited</h3>
</div>
<div class="FourtySpecs">
<div class="monthlyUsage">
<h3 style="text-align: center;">Usage</h3>
<h1 class="Usage">150</h1>
<p class="Gigabyte">GB</p>
</div>
<div class="Download">
<h3 style="text-align: center;">Download</h3>
<h1 class="Usage" style="text-align: center;">10</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="Upload">
<h3 style="text-align: center;">Upload</h3>
<h1 class="Usage" style="text-align: center;">1</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="orderNow">
<button class="btn btntruespeed orderButton">Order Now!</button>
</div>
</div>
So is there a way to do this where it automatically checks which div you clicked on to show it, and to hide the others?
Thanks in advance.
The generic way to do this is to link up the trigger element with its content using data-* attributes, along with giving all content elements a shared class so they can all be hidden in one.
$('.content').hide();
$('.btn').click(function(){
$('.content').hide()
var target = $(this).data("target");
$(target).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" data-target="#content1">Show 1</button>
<button class="btn" data-target="#content2">Show 2</button>
<div id="content1" class="content">Content 1</div>
<div id="content2" class="content">Content 2</div>
$(".header").click(function() {
//current div
$header = $(this);
//getting the next element
$content = $header.next();
//Hide all other than current div.
$(".header").next().not($content).hide();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.toggle(500, function() {
//change text of header based on visibility of content div
$header.text(function() {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
.container {
width: 100%;
border: 1px solid #d3d3d3;
}
.container div {
width: 100%;
}
.container .header {
background-color: #d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
display: none;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
Try this
$(document).ready(function(){
$(".show").hide();
$(".Show15").click(function(){
$(".show").show();
});
$(".Show40").click(function(){
$(".show").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="buttons">
<button class="buttonText Show15" width="200" height="300">DSL 6</button>
<button class="buttonText Show40" width="200" height="300">DSL 10</button>
</div>
<div class="show">
<div class="FifteenInfo border">
<h1 class="Package">DSL 6</h1>
<div class="cableSpacer"></div>
<h3 class="monthlyPrice">\$29.99</h3>
<div class="cableSpacer"></div>
<h3 class="differentbandwidth">\$39.99 Unlimited</h3>
</div>
<div class="FifteenSpecs">
<div class="monthlyUsage">
<h3 style="text-align: center;">Usage</h3>
<h1 class="Usage">150</h1>
<p class="Gigabyte">GB</p>
</div>
<div class="Download">
<h3 style="text-align: center;">Download</h3>
<h1 class="Usage" style="text-align: center;">6</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="Upload">
<h3 style="text-align: center;">Upload</h3>
<h1 class="Usage" style="text-align: center;">800</h1>
<p class="Megabyte">Kbps</p>
</div>
<div class="orderNow">
<button class="btn btntruespeed orderButton">Order Now!</button>
</div>
</div>
<div class="FourtyInfo border">
<h1 class="Package">DSL 10</h1>
<div class="cableSpacer"></div>
<h3 class="monthlyPrice">\$29.99</h3>
<div class="cableSpacer"></div>
<h3 class="differentbandwidth">\$44.99 Unlimited</h3>
</div>
<div class="FourtySpecs">
<div class="monthlyUsage">
<h3 style="text-align: center;">Usage</h3>
<h1 class="Usage">150</h1>
<p class="Gigabyte">GB</p>
</div>
<div class="Download">
<h3 style="text-align: center;">Download</h3>
<h1 class="Usage" style="text-align: center;">10</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="Upload">
<h3 style="text-align: center;">Upload</h3>
<h1 class="Usage" style="text-align: center;">1</h1>
<p class="Megabyte">Mbps</p>
</div>
<div class="orderNow">
<button class="btn btntruespeed orderButton">Order Now!</button>
</div>
</div></div>
You can create a wrapper function to hide all similar elements using class pattern selectors
Sample Code
$(".buttonText").click(function() {
hideAll();
var _showClass = $(this).attr("class").match(/Show.{2}/).pop();
switch (_showClass) {
case "Show15":
toggleSection("Fifteen", true);
break;
case "Show40":
toggleSection("Fourty", true);
break;
case "Show60":
toggleSection("Sixty", true);
break;
}
});
function toggleSection(group, show) {
var selector = "[class^=" + group + "]";
show ? $(selector).show() : $(selector).hide();
}
Sample Fiddle.
Note: This will hide all similar classes. Eg: toggleSection("Fourty", true) this will hide elements with FourtyInfo, FourtySpecs and Fourty...
If you have such case, I suggest you try something like this:
function toggleSection(group, show) {
var sections = ["Info", "Specs"];
var selector = sections.map(function(k) {
return "." + group + k
}).join();
show ? $(selector).show() : $(selector).hide();
}
This will have more control as you have specified which classes are to be used.
Sample Fiddle
Here is the shortest way .. works for all situations ..
script:
$(document).ready(function(){
// at the start..
$('body').children().first().addClass('show');
$('div').click(function(){
$(this).removeClass('show');
$(this).next().addClass('show');
});
// at the end ..
$('body').children().last().click(function(){
$('body').children().first().addClass('show');
});
});
in ur style add
div{
visibility: hidden;
}
.show{
visibility: visible;
}
Full code and working Demo Here
I've this code
jQuery(function($) {
//After it toggle the content with this button
$('.content_toggle').hide();
$('.link-toggle').before('<i class="fa fa-caret-right"></i>');
$(".link-toggle").click(function() {
$(this).toggleClass('active');
$(this).next(".project .content_toggle").slideToggle("slow");
$('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
});
//Let's the magic applies <3
});
i, h4 {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="project">
<h4 class="link-toggle">Link 1</h4>
<div id="" class="content_toggle">
<p>Hello world</p>
</div>
</div>
<div class="project">
<h4 class="link-toggle">Link 2</h4>
<div id="" class="content_toggle">
<p>Hello world</p>
</div>
</div>
It almost works, but when I click on a link, all the icons change.
I want that when I click on the first link for example, only its icon change.
The same thing when I click on the second link, only its icon change.
Thanks for you help !
Grab the current element with $(this) and navigate up to the parent with closest()
$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
jQuery(function ($) {
//After it toggle the content with this button
$('.content_toggle').hide();
$('.link-toggle').before('<i class="fa fa-caret-right"></i>');
$(".link-toggle").click(function () {
$(this).toggleClass('active');
$(this).next(".project .content_toggle").slideToggle("slow");
$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
});
//Let's the magic applies <3
});
i, h4 {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="project">
<h4 class="link-toggle">Link 1</h4>
<div id="" class="content_toggle"><p>Hello world</p></div>
</div>
<div class="project">
<h4 class="link-toggle">Link 2</h4>
<div id="" class="content_toggle"><p>Hello world</p></div>
</div>
You are toggling the class of all i, You need to toggle the class taking current element in context. So you can use .closest() to navigate to element with project class.
Use
$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
instead of
$('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
jQuery(function($) {
//After it toggle the content with this button
$('.content_toggle').hide();
$('.link-toggle').before('<i class="fa fa-caret-right"></i>');
$(".link-toggle").click(function() {
$(this).toggleClass('active');
$(this).next(".project .content_toggle").slideToggle("slow");
$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
});
});
i,
h4 {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="project">
<h4 class="link-toggle">Link 1</h4>
<div id="" class="content_toggle">
<p>Hello world</p>
</div>
</div>
<div class="project">
<h4 class="link-toggle">Link 2</h4>
<div id="" class="content_toggle">
<p>Hello world</p>
</div>
</div>