I am trying to figure out a way to get a div based on which link a user clicks on the show.
by default there is text in the main window. When a user clicks on one of the 7 links the associated hidden div would show hiding the default text. then based on which link is clicked it would show the related div and hide the previous one.
What would be a good way to acheive this? Im new to divs and java I dont know how to go about doing this. I know I need css and javascript but every thing I try is not working
this is the hidden divs in the main window.
<div id="hiddendiv">
<id="link1">hidden link 1</div>
<id="link2">hidden link 2</div>
<id="link3">hidden link 3</div>
<id="link4">hidden link 4</div>
<id="link5">hidden link 5</div>
<id="link6">hidden link 6</div>
<id="link7">hidden link 7</div>
</div>
Here are the links to click on the display the div in the main window.
<div id="carlist1">link1</div>
<div id="carlist1">link2</div>
<div id="carlist1">link3</div>
<div id="carlist1">link4</div>
<div id="carlist1">link5</div>
<div id="carlist1">link6</div>
<div id="carlist1">link7</div>
please excuse the crude pic it wont let me upload a pic as a new person. LEts hope the formatting stays the same when I post.
http://oi41.tinypic.com/2ymvps2(dot)jpg
+++++++++++++++++++++++++++++++++++++
+-------------------------------------------------------------+
+--header---------------------------------------------------+
+--description----------------------------------------------+
+******************************************************+
+---------main window/main window--|||--link1-------+
+---------main window/main window--|||--link2-------+
+---------main window/main window--|||--link3-------+
+---------main window/main window--|||--link4-------+
+---------main window/main window--|||--link5-------+
+---------main window/main window--|||--link6-------+
+---------main window/main window--|||--link7-------+
+---------main window/main window--|||---------------+
+-----------------------------------------------|||---------------+
+-----------------------------------------------|||---------------+
++++++++++++++++++++++++++++++++++++
This is how you do it: http://jsfiddle.net/n4hqF/
<div class="hiddendiv">
<div class="hide" id="link1">hidden link 1</div>
<div class="hide" id="link2">hidden link 2</div>
<div class="hide" id="link3">hidden link 3</div>
<div class="hide" id="link4">hidden link 4</div>
<div class="hide" id="link5">hidden link 5</div>
<div class="hide" id="link6">hidden link 6</div>
<div class="hide" id="link7">hidden link 7</div>
</div>
<div class="carlist1">link1</div>
<div class="carlist1">link2</div>
<div class="carlist1">link3</div>
<div class="carlist1">link4</div>
<div class="carlist1">link5</div>
<div class="carlist1">link6</div>
<div class="carlist1">link7</div>
JS
I am guessing you already have jquery library
$('a').click(function(){
$('.hide').hide();
$('.carlist1').show();
var rel = $(this).attr('rel');
$(this).closest( "div" ).hide();
$("#" + rel).show();
});
CSS
.hide{
display:none;
}
You missed the div tag name and ids must be unique, use a class instead. There is place for improvement but I kept your markup and made a jsFiddle here.
The HTML :
<div id="hiddendiv">
<div id="link1">hidden link 1</div>
<div id="link2">hidden link 2</div>
<div id="link3">hidden link 3</div>
<div id="link4">hidden link 4</div>
<div id="link5">hidden link 5</div>
<div id="link6">hidden link 6</div>
<div id="link7">hidden link 7</div>
</div>
<div class="carlist1">link1</div>
<div class="carlist1">link2</div>
<div class="carlist1">link3</div>
<div class="carlist1">link4</div>
<div class="carlist1">link5</div>
<div class="carlist1">link6</div>
<div class="carlist1">link7</div>
And the Jquery :
$( "#hiddendiv div" ).hide(); // hide all the div not supposed to be visible
$( '.carlist1' ).on( 'click', function () {
var hiddenLinkId = "#" + $( this ).children( "a" ).attr( "rel" );
$( hiddenLinkId ).show(); // this will show the hidden link corresponding to the rel data
$( this ).hide(); // if you want to hide the clicked link
} );
Related
Well, I have n elements with the class "class_one"
and certain other elements with the class "class_two".
These elements are nested and in some cases there are other elements in that nest, what I need is to select the next element with a specific class.
let class_one = document.querySelectorAll('.class_one');
class_one.forEach(element => {
element.addEventListener('click',()=>{
console.log("From this element, the next one containing the class class_two");
})
});
<div class="class_one">
click 1
</div>
<div class="class_two">elemento 1</div>
<div class="class_one">
click 2
</div>
<div class="class_four"></div>
<div class="class_two">elemento 2</div>
<div class="class_one">
click 3
</div>
<div class="class_six"></div>
<div class="class_two">elemento 3</div>
<div class="class_one">
click 4
</div>
<div class="class_five">click 5</div>
<div class="class_two">elemento 4</div>
<div class="class_one">
click 6
</div>
<div class="class_two"></div>
Personally, I would like an answer without using Jquery, but all are welcome.
I have a function which, when clicking on a link with the class .show-more, opens up the div with the class .productinfo. Now, it also adds a class to the link itself (.active) - the problem what I have is that I have a few links on this page with the same class. I've managed to only open up the correct .productinfo when clicking on it, but the class will be added to every link nonetheless. Also tried adding the following to the code but that did not work:
$(this).find('show-more').toggleClass("active");
My structure is the following:
<div class="main-content">
<div class="col-1">Content 1</div>
<div class="col-2">Content 2</div>
<div class="col-3"><a class="show-more">Show more</a></div>
<div class="productinfo">This content is hidden and will be shown when clicked</div>
</div>
<div class="main-content">
<div class="col-1">Content 1</div>
<div class="col-2">Content 2</div>
<div class="col-3"><a class="show-more">Show more</a></div>
<div class="productinfo">This content is hidden and will be shown when clicked</div>
</div>
jQuery(document).ready(function($) {
$('body').on('click', 'a.show-more', function(e) {
e.preventDefault();
$('.show-more').toggleClass("active");
var $this = $(this).parents('.product');
$this.find('.productinfo').toggle(0, 'slide')
});
});
Why not:
$('a.show-more').on('click', function(e)
and then
$(this).toggleClass("active");
I have a div (main div) which contains several div elements(sub divs). I want to hide all inside div elements using Jquery. Can any body help me. But main div should display always.
Should be easy as:
$('#mainDiv > div').hide();
to hide only all direct children from #mainDiv or
$('#mainDiv div').hide();
to hide any descendant div of #mainDiv.
and also you can animate the hiding like this:
$('#mainDiv div').slideUp();
$('#mainDiv div').slideToggle();
$('#mainDiv div').fadeToggle();
these are simple jquery animations.
Try this way,works fine
<div style="text-align:center;background-color: lightblue;">Main div
<button id="checkButton"type="button" class="btn btn-primary">Check</button>
<div id="subdiv1" hidden>Sub Div 1</div>
<div id="subdiv2" hidden>Sub Div 2</div>
<div id="subdiv3" hidden>Sub Div 3</div>
<div id="subdiv4" hidden>Sub Div 4</div>
<div id="subdiv5" hidden>Sub Div 5</div>
</div>
<script>
$(document).ready(function(){
$("#checkButton").click(function(){
$("#subdiv1").toggle();
$("#subdiv2").toggle();
$("#subdiv3").toggle();
$("#subdiv4").toggle();
$("#subdiv5").toggle();
});
});
</script>
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.
Can somebody please tell me why this script is not working? It is supposed to work, but it doesn't, I am getting the id correctly, but Divs are not displaying properly. My idea is to display one div based on the click, and hide the other Divs.
Script
$(document).ready(function() {
$("a").live("click", function(){
var idV = $(this).attr("id");
alert(idV);
$("#"+idV+"div").css("display","block");
return false;
});
});
HTML
Solution 1
Solution 2
Solution 3
Solution 4
<br />
<div id="solution1" style="display:none;">Solution 1</div>
<div id="solution2" style="display:none;">Solution 2</div>
<div id="solution3" style="display:none;">Solution 3</div>
<div id="solution4" style="display:none;">Solution 4</div>
Your div ids are wrong.
Try:
<div id="solution1div" style="display:none;">Solution 1</div>
instead of
<div id="solution1" style="display:none;">Solution 1</div>
Edit:
JSBIN: Preview
JSBIN: Source Code
Solution 1
Solution 2
Solution 3
Solution 4
<br />
<div>
<div id="solution1div" style="display:none;">Solution 1</div>
<div id="solution2div" style="display:none;">Solution 2</div>
<div id="solution3div" style="display:none;">Solution 3</div>
<div id="solution4div" style="display:none;">Solution 4</div>
</div>
jquery:
$("a").live("click", function(){
var idV = $(this).attr("id");
$("#"+idV+"div").siblings().hide();
$("#"+idV+"div").show();
return false;
});
mmmm the error is actually there man..
see:
$("#"+idV+".div").css("display","block");
change it to:
$("div#"+idV).css("display","block");
You're reusing ID attributes. IDs need to be unique to a document.
You can't have anchors and divs with the same ID.