Develop Reference

Show/hide div from separate links _ multiple boxes issue

I have managed to toggle a div with different links. But when i'm trying to make more boxes which the same it doesn't work anymore.
Imagine I have like 10 entries - all separated divs 'entry'
<div class="entry" id="1">
where i want to separately hide and show content with multiple links.
My Question is, I'm trying to fix this since 5 hours, but which one div entry its working, with more than one it is not working.
I tried to use
$(".entry").each(function() {
Here is my code:
$(document).ready(function() {
$(".entry").each(function() {
var b4c = $('.lower_menu').html(); // content of box 4 so that we cn refer to it later
$(".menu1,.menu2,.menu3").click(function() {
var active_content = $(".lower_menu").data('content');
var cls = $(this).attr('class');
if (active_content == '') {
$(".lower_menu").html($("." + cls + '_CONTENT').html())
$(".lower_menu").data('content', cls);
} else {
if (active_content == cls) {
$('.lower_menu').html(b4c).data('content', '');
} else {
$(".lower_menu").html($("." + cls + '_CONTENT').html())
$(".lower_menu").data('content', cls);
}
}
});
});
});
.menu1 {height:40px; background-color:red;}
.menu2 {height:40px; background-color:green;}
.menu3 {height:40px; background-color:blue;}
.menu1_CONTENT {display:none; background-color:red;}
.menu2_CONTENT {display:none; background-color:green;}
.menu3_CONTENT {display:none; background-color:blue;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="entry">
<div class="menu1">
<span id="arrow_prod" class="glyphicon glyphicon-chevron-down arrow"></span> Heading 1
</div>
<div class="menu2">BOX 2</div>
<div class="menu3">BOX 3</div>
<!-- data-content is to check do we have content or which boxes's content do we hv now -->
<div class="lower_menu" data-content=""></div>
<div class="menu1_CONTENT">CONTENT FOR BOX 1</div>
<div class="menu2_CONTENT">CONTENT FOR BOX 2</div>
<div class="menu3_CONTENT">CONTENT FOR BOX 3</div>
</div>
<div class="entry">
<div class="menu1">BOX 1</div>
<div class="menu2">BOX 2</div>
<div class="menu3">BOX 3</div>
<!-- data-content is to check do we have content or which boxes's content do we hv now -->
<div class="lower_menu" data-content=""></div>
<div class="menu1_CONTENT">CONTENT FOR BOX 1</div>
<div class="menu2_CONTENT">CONTENT FOR BOX 2</div>
<div class="menu3_CONTENT">CONTENT FOR BOX 3</div>
</div>
... and a JSFiddle

it's a official bug of the jquery! We found one guys ! YEEEHAA

javascript loop needed to show hidden list onclick one at a time

I have a list of hidden divs and would like to be able to show one div at a time, when a button is pressed, .. I am having a hard time writing the proper loop for this.
product_options: function() {
var product_option = $('.product_product_options_option_name')
$(product_option).css("display", "none");
$('.add_product_option').on('click', function (e) {
e.preventDefault();
$(product_option).each(function(){
$(this).css("display", "block")
});
});
}
currently it displays them all onclick, i deleted all my other loop attempts, bc they were egregiously wrong or were not doing much

Try
product_option.first().show(); //show only the first one
product_option = product_option.slice(1); //remove the first one
Demo:
$(function() {
var options = $('.product_option').hide();
$('.add').click(function() {
if(options.length) {
options.first().show();
options = options.slice(1);
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product_option">Option 1</div>
<div class="product_option">Option 2</div>
<div class="product_option">Option 3</div>
<div class="product_option">Option 4</div>
<div class="product_option">Option 5</div>
<div class="product_option">Option 6</div>
<div class="add">Add product option</div>

product_options: function() {
var product_option = $('.product_product_options_option_name')
$(product_option).css("display", "none");
$('.add_product_option').on('click', function (e) {
e.preventDefault();
$(product_option + ':hidden').eq(0).show();
});
}

try this : demo
$('.product_product_options_option_name').hide();
var count = 0;
$('.add_product_option').on('click',function(){
$('.product_product_options_option_name:eq('+count+')').show();
count++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="add">
<input type="button" class="add_product_option" value="click" />
</div>
<div class="product_product_options_option_name">
<label>1div</label>
</div>
<div class="product_product_options_option_name">
<label>2div</label>
</div>
<div class="product_product_options_option_name">
<label>3div</label>
</div>
<div class="product_product_options_option_name">
<label>4div</label>
</div>

How to select a div and display another div with more description about that div?

Hi im new on jquery and nowhere in javascript but anyway im trying to create this carousel where you can click any item from the list and show more infos about that item on the left div.
Here is the preview:
I've already created the carousel on the right part but im stuck on what to use for displaying the left part when specific item is selected can i do it with any jquery plugin or do i need to deep dive in javascript?

You can use the following example
HMTL
<div id="slidercontent">
<div>Details 1</div>
<div>Details 2</div>
<div>Details 3</div>
</div>
<div id="pager">
<div>pager 1</div>
<div>pager 2</div>
<div>pager 3</div>
</div>
Jquery
//Hidding the slidercontent
$('#slidercontent div').hide();
//Displaying first slidercontent
$('#slidercontent div').eq(0).show();
$('#pager div').click(function(){
var idx = $(this).index();
$('#slidercontent div').hide().eq( idx ).fadeTo(500, 1);
$('#pager div').removeClass('active');
$(this).addClass('active');
});

Let's say you have:
<div id="carousel">
<div id="details">
<div>Details 1</div>
<div>Details 2</div>
<div>Details 3</div>
</div>
<div id="info">
<div>info 1</div>
<div>info 2</div>
<div>info 3</div>
</div>
</div>
LIVE DEMO
var $det = $('#details > div');
$det.eq(0).show();
$('#info > div').click(function(){
var idx = $(this).index();
$det.hide().eq( idx ).fadeTo(500, 1);
});

Bind a click event to the carousel list item, on click, fire an ajax call to your server and retrieve the html or json and display it in the left div.
something like this might work
$("#carousel > li").click(function() {
alert($(this).attr("value"));
//$.post("url.html", { fruit: $(this).attr("value") }, function(data) {
// $("#left").html("<span>" + $(this).attr("value") + "</span>" + data);
//}
});
jsfiddler

Switch content of div when another div gets hovered on

I'm having trouble getting something like this to work. I've got a series of DIVS (1 through 8) and when you hover over one div, I want to literally change the contents of one of the other divs with the contents of #replace (which is current set to hidden)
<div id="replace" style="visibility:hidden;">Bla Bla Bla</div> ​
Here is what I've got so far:
$('#1').on({
mouseover: function(){
$('#2').replaceWith(jQuery('#replace'));
},
mouseleave: function(){
$('#2').replaceWith(jQuery('#2'));
},
click: function(){
$('#2').replaceWith(jQuery('#replace'));
$('#1').off('mouseleave mouseover');
}
});
Not really having an effect at all - so is my logic bad, how i'm doing it bad, etc...?

jsBin demo
<div class="box">This is DIV #1 :) </div>
Add a class .box to all your 8 elements and do:
jQuery(function($){
var replaceText = $('#replace').text();
var memorizeText = '';
$('.box').on({
mouseenter: function(){
memorizeText = $(this).next('.box').text(); // memorize text
$(this).next('.box').text(replaceText);
},
mouseleave: function(){
$(this).next('.box').text( memorizeText ); // restore memorized text
},
click: function(){
$(this).next('.box').text( replaceText );
$(this).off('mouseleave mouseenter');
}
});
});

Like this?
<div class="page">
<div class="content">Bla bla bla</div>
</div>
<div class="page">
<div class="content">Some more text</div>
<div class="content-alt" style="display: none;">I like fish</div>
</div>
<div class="page">
<div class="content">Hello there</div>
<div class="content-alt" style="display: none;">Test 123</div>
</div>
<div class="page">
<div class="content">Test</div>
<div class="content-alt" style="display: none;">Hi!</div>
</div>
JS
$('.page').on({
mouseover: function(){
var nextPage = $(this).next('.page');
nextPage.children('.content').hide();
nextPage.children('.content-alt').show();
},
mouseleave: function(){
var nextPage = $(this).next('.page');
nextPage.children('.content').show();
nextPage.children('.content-alt').hide();
}
});
Original answer
If I understand your question correctly, you can try this:
HTML
<div id="page1"><div class="name">Page 1</div></div>
<div id="page2"><div class="name">Page 2</div></div>
<div id="page3"><div class="name">Page 3</div></div>
<div id="hidden" style="display: none">This is some hidden text</div>
JS
$('#page1').on({
mouseover: function(){
$('#page2 .name').hide().after($('#replace'));
},
mouseleave: function(){
$('#hidden').hide();
$('#page2 .name').show();
},
click: function(){
$('#hidden').hide();
$('#page2 .name').show();
$('#1').off('mouseleave mouseover');
}
});
But I'm not really sure why you are trying to do this. Are you just trying to show and hide some text on mouse over?

Don't have a lot of data on what your HTML structure looks like, the purpose of this, etc. But the following is an example structure that would achieve what you're question refers to -- and it's a bit shorter as writing out a specific handling for every div when they all do the same thing makes it a bit unnecessarily long. Code is below, working example also in this jsfiddle
HTML
<div id="1" class="replace-me">DIV 1</div>
<div id="2" class="replace-me">DIV 2</div>
<div id="3" class="replace-me">DIV 3</div>
<div id="4" class="replace-me">DIV 4</div>
<div id="5" class="replace-me">DIV 5</div>
<div id="6" class="replace-me">DIV 6</div>
<div id="7" class="replace-me">DIV 7</div>
<div id="8" class="replace-me">DIV 8</div>
<div id="replacementText">REPLACEMENT TEXT</div>
CSS
#replacementText {
visibility: hidden;
}​
JQuery
$('.replace-me').mouseover(function() {
$(this).text($('#replacementText').text());
});
$('.replace-me').mouseout(function() {
$(this).text("DIV "+$(this).attr('id'));
});
​

How can I hide elements in my list and add a 'show more' feature?

I'm using javascript to build a list of results. I have a for-loop that iterates over some data and creates a mydata div, and adds that to the results div. Let's pretend it looks something like this:
<div id="results">
<div class="mydata">data 1</div>
<div class="mydata">data 2</div>
...
<div class="mydata">data 20</div>
</div>
What I want to do is only display 5 results at a time, and should the user wish to see more, they can click a show next 5 or show more button (or something similar). Any ideas?
Just to clarify, every time the user clicks "show more" I want to 'unhide' the next 5 elements, not ALL the remaining elements. So each click reveals more elements until all are displayed.

You can use the gt() and lt() selectors along with :visible pretty well here.
The following will show the next 5 results on clicking and removes the link once all items are visible.
$('.mydata:gt(4)').hide().last().after(
$('<a />').attr('href','#').text('Show more').click(function(){
var a = this;
$('.mydata:not(:visible):lt(5)').fadeIn(function(){
if ($('.mydata:not(:visible)').length == 0) $(a).remove();
}); return false;
})
);
working example: http://jsfiddle.net/niklasvh/nTv7D/
Regardless of what other people are suggesting here, I would not hide the elements using CSS, but do it in JS instead, because if a user has JS disabled and you hide the elements using CSS, he won't get them visible. However, if he has JS disabled, they will never get hidden, nor will that button appear etc, so it has a full noscript fallback in place + search engines don't like hidden content (but they won't know its hidden if you do it on DOM load).

My solution is here: jsFiddle.
You can put this link somewhere:
show more
and use the following code:
var limit = 5;
var per_page = 5;
jQuery('#results > div.mydata:gt('+(limit-1)+')').hide();
if (jQuery('#results > div.mydata').length <= limit) {
jQuery('#results-show-more').hide();
};
jQuery('#results-show-more').bind('click', function(event){
event.preventDefault();
limit += per_page;
jQuery('#results > div.mydata:lt('+(limit)+')').show();
if (jQuery('#results > div.mydata').length <= limit) {
jQuery(this).hide();
}
});
where limit is your current number of results displayed and per_page is number of results shown with each click on "show more". The link disappears if all the results are displayed. See how it works on jsFiddle.

You can create a CSS class like:
.hiddenData { display: none }
and attach it to any quantity of divs that exceeds 5.
After that make handlers for adding/deleting this class from the needed quantity of divs.
jQuery for class removing:
$(".hiddenData").removeClass("hiddenData")

Create a class with something like:
.hidden_class{
display: none;
}
Add this class to all the mydata div's that you dont want seen.
when the user click the button, remove it from the next 5 div's.
repeat everytime the user clicks the "read more" button

This should work...Let me know how it goes
<script type="text/javascript">
function ShowHide(id) { $("#" + id).toggle(); }
</script>
<div id="results">
<div class="mydata">data 1</div>
<div class="mydata">data 2</div>
<div class="mydata">data 3</div>
<div class="mydata">data 4</div>
<div class="mydata">data 5</div>
<div style="clear:both" onclick="ShowHide('grp6')">More</div>
<div id="grp6" style="display:none">
<div class="mydata">data 6</div>
<div class="mydata">data 7</div>
<div class="mydata">data 8</div>
<div class="mydata">data 9</div>
<div class="mydata">data 10</div>
</div>
<div style="clear:both" onclick="ShowHide('grp11')">More</div>
<div id="grp11" style="display:none">
<div class="mydata">data 11</div>
<div class="mydata">data 12</div>
<div class="mydata">data 13</div>
<div class="mydata">data 14</div>
<div class="mydata">data 15</div>
</div>
</div>
In your forloop, you also have to add these divs hidden container
<div style="clear:both" onclick="ShowHide('grp6')">More</div>
<div id="grp6" style="display:none">
You get the idea.

Here you have:
<style>
/*This hides all items initially*/
.mydata{
display: none;
}
</style>
Now the script
<script>
var currentPage = 1; //Global var that stores the current page
var itemsPerPage = 5;
//This function shows a specific 'page'
function showPage(page){
$("#results .mydata").each(function(i, elem){
if(i >= (page-1)*itemsPerPage && i < page*itemsPerPage) //If item is in page, show it
$(this).show();
else
$(this).hide();
});
$("#currentPage").text(currentPage);
}
$(document).ready(function(){
showPage(currentPage);
$("#next").click(function(){
showPage(++currentPage);
});
$("#prev").click(function(){
showPage(--currentPage);
});
});
</script>
And a sample html:
<div id="results">
<div class="mydata">data 1</div>
<div class="mydata">data 2</div>
<div class="mydata">data 3</div>
<div class="mydata">data 4</div>
<div class="mydata">data 5</div>
<div class="mydata">data 6</div>
<div class="mydata">data 7</div>
<div class="mydata">data 8</div>
<div class="mydata">data 9</div>
<div class="mydata">data 10</div>
<div class="mydata">data 11</div>
<div class="mydata">data 12</div>
</div>
Previous
<span id="currentPage"></span>
Next
The only thing remaining is to validate fot not going to a page lower than 1 and higher than the total. But that will be easy.
EDIT: Here you have it running: http://jsfiddle.net/U8Q4Z/
Hope this helps. Cheers.