We Keep Coding

How to show text when clicking on an image to a div

I want to post an image of 2 DIVs, separated by a black line , the one on the left have 4 images and what I want is:
When I click on any of the buttons it will reveal a text in the right DIV and when I press another image it reveals, too, another text. I have no idea how I can do that, that's why I'm here asking for help.
If you have any ideas about the subject, like what I must use, or sources that you can find because I didn't find anything related.
I've searched about this in JavaScript revealing a text from a button, but nothing that could help me.
For your better understanding i will show you how is the final result, how it should look.
http://prntscr.com/7krf5h
Of course without the arrows pointing, and the image in the right div, it will disappear, i just need the text and show the text, but i think u understand the content.

It looks like you're trying to setup a slideshow of some sort. One way you can do it is to create two lists, a hidden one for the slide data and another visible one for the list of slides on the left-hand side. Then, you can grab the necessary data from the hidden list based on index. Here's an example fiddle that will highlight what I mean: http://jsfiddle.net/ethueuhj/1/ (in the fiddle, you can change the data-bg attribute to a computer background, tablet background, et al).
$(function() {
function setSlide(index) {
var slide = $('.slide-data li').eq(index);
$('.slide-container').css({ "background-image": "url('" + slide.data('bg') + "')" });
$('.slide-container').html(slide.html());
}
$('.slides li').click(function() {
setSlide($(this).index());
});
// Default slide
setSlide(0);
});

You need to use jquery in order to achieve what you want.
Also, you need to change the text of the div when you click on another div tag. For this, you need to user inner html.
Here is the sample code, you can try it.
$(document).ready(function(){
$("name_of_image_div_tag_here").click(function(){
alert("The image was clicked.");
document.getElementById("name_of_text_div_tag_here").innerHTML = "Sample text to display";
});
});

Select image by default on page load

I have a JSON feed and I extract the values to populate a select menu with product sizes, colours/thumbnails, and get the values in an object, on submit.
What I need is to select an image by default, if its title is matching a value of a variable declared and initialised at the top (e.g. var initialColour = "Wheat";). So if initialColour is "Brown", the image with the title "Brown" should be selected by default and the sizes in the dropdown menu should reflect the selection.
This is what I am trying:
if(mainImg.attr('title') == initialColour) {
$(this).addClass("active");
}
This is on line 27 on jsfiddle link below.
JSFIDDLE COMPLETE DEMO
p.s. I would also appreciate any hints with regards the structure, I know its a mess.

Is this fiddle does what you want?
I changed some code in two places, I left the original lines there as a reference.
Basically, I assigned the image directly to mainImg. Then use that when adding the class too. Also, you missed a couple of 's in the image html here:
$("<img src="+constructImageURL(mainImgID)+" id="+mainImgID+" class='colourThumb' title="+colour+" data-value='"+colour+"'> ")

Part of the issue is that you're trying to set the active thumbnail within the for loop, when instead, a JQuery attribute selector can be used:
$("#colourId .colourThumb[title='"+initialColour+"']").each(function() {
$(this).addClass("active");
});
I've updated the original Fiddle showing that once all dynamic elements have been created, the statement above will do the trick. (Line 87)
In terms of style, it may be worth looking at one of the data binding/templating frameworks (e.g. KnockoutJS) which will make things a lot clearer in the code. There's a learning curve, but it is worth it for what you're doing.

When hiding text and then re showing it, it doesn't come back properly, it doesn't allocate room for the text appearing

So on load of document I hide all my description divs, then when hovering over I want the divs to display the text below, however its not allocating space for the text to be there. It gets stuck underneath my footer. However if I tried the invert aka, show it on start and hide it on hover it works perfectly as intended, making space when it reshows itself.
The main part of my code is here
http://www.hastebin.com/yilinademe.xml
http://gurucraft.co.uk/media.php If you look at the thumbnail lower on the page, when you hover over it, you see the title appear but the paragraph does not appear? Makes no sense. I'm assuming the paragraph is getting stuck under footer or something?

Use this :
$(document).ready(function() {
$(".view").hover(function() {
$(this).parent().children(".test").show();
});
$(".test").hide();
});
Update :
After looking at the code at your link I found that the the problem is due to one of the jQuery plugin used (isotope), To fix it use this :
$(document).ready(function() {
$(".view").hover(function() {
$(this).parent().children(".test").show();
$('.isotopeWrapper').isotope('reLayout');
});
$(".test").hide();
});

Show/Hide Div, of divers DIV's

I'm new to this site.
Javascript is not much, but I found a code to show and hide divs.
This is what I have for now, when clicking on Details1 also shown Details2
jsfiddle.net/qU3TG/3/
How I can do to make the effect only to the current item?
example:
If I have the options Details 1 Details 2, 3 ..... Details DetailsN, clicking on Details # shows only the div that belongs.
The effect Show / Hide, applies to everyone, not just one. I would like to help me with this code or wish I could recommend another code
I have almost one day trying to fix this problem but I couldn't fix it.

Based on your jsFiddle, I've renamed the links inside hidden blocks:
hide
then updated the jQuery code:
jsFiddle

Use this as in your jQuery part:
$('.slidingDiv .hide').click(function(){
$(this).parent().slideToggle();
});
This will cause the parent div which contains the hide anchor to toggle. I hope this is what you needed

instant search jquery plugin

First of all this is how the script works: jsfiddle
The 'searchList' setting specifies the content that will be searched. In this case it is searchable tr. Finally, the 'searchItem' setting allows to dive in and specify an individual element to search. In this case, I use 'td'.
In this fiddle
I have a list of thumbnail images with some informations, what I want to do is to be able to search for "something" and then to show the image and the text related to that specific thumbnail.
Hope you understand what I'm trying to achieve.

Out on a limb, but your selector for searchList looks wrong:
'searchList' : '.imgscontainer portfolio-v6-items ',
Surely that second class should have a dot before it, and they're on the same element, so no space:
class="imgscontainer portfolio-v6-items"