Develop Reference

Changing the image inside of a DIV onclick of another DIV

So, it has been a while since I've had to do anything jquery and I'm having trouble recalling the simplest of tasks.
I have a DIV with a default image in it and I want that to change that image when I click an LI link on the page.
My question is, what does my jquery look like if I want to click 'view brown' and have it replace the default 'lboard-black' image and so forth.
All I've really accomplished in trying to remember the syntax is show hide and toggling; Its similar to an image gallery type script I guess but much much simpler.
<style>
.lactive{display:block;}
</style>
Image Container:
<div id="StuffandThings">
<div id="lboard-black" style="display:none;" class="lactive"><img src="" /></div>
<div id="lboard-brown" style="display:none;"><img src="" /></div>
<div id="lboard-grey" style="display:none;"><img src="" /></div>
</div>
Link Container:
<ul>
<li><div class="lblack">view black</div></li>
<li><div class="lbrown">view brown</div></li>
<li><div class="lgrey">view grey</div></li>
</ul>
This is what i tried working with initially:
http://jsfiddle.net/wsfy5uo2/

The Jquery click method would do. https://api.jquery.com/click/
Going by your code
Something similar to the following might work, but you may consider using element IDs instead
$(".lblack").click(function(){
$("#StuffandThings div").hide();
$("#lboard-black").show();
});
$(".lbrown").click(function(){
$("#StuffandThings div").hide();
$("#lboard-brown").show();
});
$(".lgrey").click(function(){
$("#StuffandThings div").hide();
$("#lboard-grey").show();
});
See the fiddle
https://jsfiddle.net/Ldtosmnx/
Update:
There are some problems with your fiddle
You've passed .link instead of .lboard-link as the selector
You haven't assigned any IDs to your elements in the first place
See this fiddle for corrections http://jsfiddle.net/kw1rgv23/

Your click event was on wrong class. It should be .lboard-link not .link. And also use this instead of e.target to get the data-foil instead of id.
$(document).ready(function () {
$('.lboard-link').on('click', function (e) {
e.preventDefault();
var id = $(this).data('foil').toLowerCase();
$('.lboard-hide').hide();
console.log(id);
$('#' + id + '-lboard').show();
});
});
.lboard-hide:not(:first-child){display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stuffandthings">
<div id="black-lboard" class="lboard-hide">1111</div>
<div id="brown-lboard" class="lboard-hide">2222</div>
<div id="grey-lboard" class="lboard-hide">3333</div>
</div>
<ul>
<li><div data-foil="Black" style="background-color: #000000;" class="lboard-link"> </div></li>
<li><div data-foil="Brown" style="background-color: #8B4513;" class="lboard-link"> </div></li>
<li><div data-foil="Grey" style="background-color: #cccccc;" class="lboard-link"> </div></li>
</ul>
You can also test it here.

What would be the best way to get data from a parent in order to achieve this?

https://jsfiddle.net/cshLevtz/
$('.items li .actions .btn').click(function() {
alert(
$(this).data('action') +
$(this).parent().parent().data('id')
);
});
I currently have this however using .parent().parent() feels really hacky and like something that would easily break if I decide to add more to the html so I was wondering, is there a better way to get the data-id of the li?
Edit: based on the answers it seems like it boils down to either .parents('li') or .closest('li'), I'm not entirely sure which one would be more fitting.

parent can take parameter selector .
selector
Type: Selector
A string containing a selector expression to match elements against.

you can use either
parents('li')
or
closest('li')

Try using .parents() with parameter li
$(".items li .actions .btn").click(function() {
alert(
$(this).data("action") +
$(this).parents("li").data("id")
);
});
jsfiddle https://jsfiddle.net/cshLevtz/1/

$('.items li .actions .btn').click(function() {
alert( $(this).data('action') + $(this).parents("li").data('id') );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="items">
<li data-id="1">
<div class="contents">
<p>First Content</p>
</div>
<div class="actions">
Edit
Delete
</div>
</li>
<li data-id="2">
<div class="contents">
<p>Second Content</p>
</div>
<div class="actions">
Edit
Delete
</div>
</li>
</ul>

Loading div with only a portion of the paragraph text

I am trying to create a headline news feed for my home page by using the Jquery .load function.
I am loading the page news.html and I can target the first elements (the latest news stories).
$( "#headline" ).load( "news.html .media-left:first, .media-body:first", function() {
$( "#headline" ).append("<a class='pull-right' href='news.html'>...Read more</a>");
});
but what I can't figure out is how to only pick up the div and the first two paragraphs within that div, so that I can create a read more button to take them to the main news.html, every time I try to reference a portion of the paragraphs, it only includes the paragraph and doesn't include the div media.body which has the styles attached to it.
<div class="media menu-center">
<div class="media-left">
<div class="donut-yellow">
<h4>
<span class="month">May</span>
<span class="day">23rd</span>
</h4>
</div>
</div>
<div class="media-body media-right ">
<p class="media-heading"><strong>e </strong></p>
<p>Welcome to the brand new ****!</p><p>To ensure that we continue to(...)</p>
<p>Take a look around the new layout and make sure to keep an eye on this(...)</p>
<span class="pull-right"><p class="bg-success"><strong>Paul</strong></p></span>
</div>
</div>

This selector seems to work:
$( "#headline" ).load( "news.html .media-body>p:nth-child(-n+2)", function() {
$( "#headline" ).append("<a class='pull-right' href='news.html'>...Read more</a>");
});
I've tested it in this Fiddle.
It returns:
e
Welcome to the brand new ****!

jQuery Use the text of an element to toggle another element that contains the same text?

I'm extremely new to jquery and I've been struggling to create this action. Any help in this matter will be greatly appreciated.
I need a way in jquery that allows a user to click a span and toggle (i.e .toggle()) another div that contains the same text as the span being clicked, without having to repeat the same function for each individual span.
My example:
<ul>
<li class="sub">
<div class="filter-row">
<div class="row-section">
<div class="row-heading">art</div>
<span class="label studio-art">studio art</span>
<span class="label ceramics">ceramics</span>
</div>
</div>
</div>
</li>
<li class="sub">
<div class="filter-row">
<div class="row-section">
<div class="row-heading">studio art</div>
<span class="label">Option 1</span>
<span class="label">Option 2</span>
</div>
<div class="row-section">
<div class="row-heading">ceramics</div>
<span class="label">Option 1</span>
<span class="label">Option 2</span>
</div>
</div>
</li>
</ul>
If a user were to click the span that contains "studio art", then I want the div that contains "studio art" to ".toggle()". I do know that I could give a unique class such as ".studio-art" to the span and div that i want to connect together, such as:
$(document).ready(function(){
$("span.label.studio-art").click(function(){
$(".row-section.studio-art").toggle();
});
$("span.label.ceramics").click(function(){
$(".row-section.ceramics").toggle();
});
});
Jsfiddle example: http://jsfiddle.net/KCRUSHER/6qLX7/
But I want to avoid doing what I have above since I may have hundreds of spans or instances like this.
So basically I'm hoping for help to create a solution that only needs the string in a span to match the string in my "row-heading" div. So that when a span is clicked the row-section div will toggle.
Thank you for any help in advance.

You can find all other div elements with the same text by using jQuery's filter method and toggle them. You'll have to pick your class names more sensibly to make sense and easier to understand.
$(document).ready(function(){
$(".row-section span").click(function(){
var clickedText = $(this).text();
$(".row-section").filter(function(){
return $(this).find("div").text() === clickedText;
}).toggle();
});
});
Updated fiddle: http://jsfiddle.net/6qLX7/2/
.filter documentation: http://api.jquery.com/filter/

I didn't test this, but it should work.
$(document).ready(function(){
$("span.label").click(function(){
var checkText = $(this).html();
$( ".row-section:contains('"+checkText+"')" ).each(function(index,element){
// This checks for exact match. If you want any "containing" match, remove the if-clause
if($(element).html() == checkText) {
$(element).toggle();
}
});
});
});
Let me know if this helps. P.S.! This function IS case-sensitive (see http://api.jquery.com/contains-selector/ for more details.)

hiding and showing div's

I would like to be able to click on a link and for it to show the div section, is there an easy jQuery solution?
e.g. click on one will show div-one, and hide div-two & div-three, click two will show div-two and hide div-one and div-three
<div class="div-one" >
one
</div>
<div class="div-two" style="display: none">
two
</div>
<div class="div-three" style="display: none">
three
</div>
one
two
three

If your anchor only has one class then you can do:
$('a').click(function(e) {
e.preventDefault();
var cls = $(this).prop('class');
$('.div-'+cls).show().siblings('div').hide();
});
Fiddle Demo
or give your anchor a data attribute:
one
two
three
then you can do:
$('a').click(function(e) {
e.preventDefault();
var cls = $(this).attr('data-target');
$('.'+cls).show().siblings('div').hide();
});
Fiddle Demo

try this
one
two
three
<script>
function show_div(el){
$('.div-'+el.className).toggle(); // toggle could be replaced with show()/hide()
}
</script>

Check Live jsFiddle
HTML
<div class="buttons">
<a id="showall">All</a>
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<div id="div1" class="targetDiv">Menu1</div>
<div id="div2" class="targetDiv">Menu2</div>
<div id="div3" class="targetDiv">Menu3</div>
<div id="div4" class="targetDiv">Menu4</div>
JQuery
jQuery(function(){
jQuery('#showall').click(function(){
jQuery('.targetDiv').show();
});
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});

You can achieve your goal easily using jQuery. Please find the way to do this below -
jQuery("a").click(function() {
jQuery("div").hide();
if(this.className == 'one')
jQuery(".div-one").show();
if(this.className == 'two')
jQuery(".div-two").show();
if(this.className == 'three')
jQuery(".div-three").show();
});
Try Demo -
http://jsfiddle.net/yrM3H/1356/

You can use show() and hide() functions in jquery to achive this.
$(".div_name").hide(); // to hide div
$(".div_name").show(); // to show div

You can use css class for this:
I have used same class for anchor and corresponding div. I have used 2 css classes(hide and show).
when some click in the anchor tag:
-- i have removed show class of previous div and added hide class.
-- i have added show class and removed hide of corresponding div by class name.
HTML:
<div class="div-one show" >
one
</div>
<div class="div-two hide" style="display: none" >
two
</div>
<div class="div-three hide" style="display: none">
three
</div>
one
two
three
JQUERY:
$(document).ready(function(){
$("a[class^='div-']").click(function(e){
e.preventDefault();
strClass= $(this).attr('class');
$(".show").removeClass("show").addClass("hide");
$("div."+strClass).removeClass("hide").addClass("show");
})
});
jsFiddle