Im trying to make the first target div always be visible when the page loads whilst the others become visible as the user selects the option. Currently they are all hidden as the page is loaded and only become visible once the buttons are clicked.
JS
$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});
HTML
<div class="buttons">
<a class="show" target="1">Option 1</a>
<a class="show" target="2">Option 2</a>
<a class="show" target="3">Option 3</a>
<a class="show" target="4">Option 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>
You can use $('.targetDiv:not(#div1)').hide() DEMO
$('.targetDiv:not(#div1)').hide();
$('.show').click(function() {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});
use :gt(0):-
:gt() Select all elements at an index greater than index within the matched set.
$('.targetDiv:gt(0)').hide();
Note:
target
This attribute specifies where to display the linked resource. (_self,
_blank, _parent, _top)
Use this attribute only if the href attribute is present.
Therefore I would recommend using data:-
<a class="show" data-target="1">Option 1</a>
and get the value using:-
$(this).data('target')
Call .show() on the first div after hiding the others:
$('.targetDiv').hide();
$('#div1').show();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});
Try this code
$(".targetDiv").not(':first').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});
Another way you can simply hide div by css in HTML JSFiddle
HTML
<div class="buttons">
<a class="show" target="1">Option 1</a>
<a class="show" target="2">Option 2</a>
<a class="show" target="3">Option 3</a>
<a class="show" target="4">Option 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum 4</div>
Javascript
//$('.targetDiv').hide();
$('.show').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
});
Related
I have been trying to create multiple divs which should be hidden at page load. The div should be shown if the corresponding button is clicked and should hide if the same button is clicked again. Also if one of the divs is being shown and another button is clicked, then the div corresponding to that button should show up. If the same button is clicked again then the div should hide.
I have followed a thread on SO for the same and am able to show divs corresponding to button click but the toggle functionality is not working.
Please find the fiddle :
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<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">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>
https://jsfiddle.net/8pyovyqn/3/
Any help is appreciated.
Use not to hide the all except clicked one and set style="display:none;" for all the div to hide them by default.
$(function() {
$('.showSingle').click(function() {
$('.targetDiv').not('#div' + $(this).attr('target')).hide();
$('#div' + $(this).attr('target')).toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<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" style="display:none;">Lorum Ipsum1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>
You can use toggle to achieve what you need:
jQuery(function(){
jQuery('.showSingle').click(function(){
var target = $(this).attr('target');
$('#div'+target).toggle('.hide');
});
});
.targetDiv{
display: none;
}
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<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">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>
Try the below jQuery code, Replace this code with your jQuery code and check functionality it will work. The toggle function is used to toggle for hide and show the element.
jQuery(function(){
jQuery('.targetDiv').hide();
jQuery('.showSingle').click(function(){
jQuery('#div'+$(this).attr('target')).toggle();
});
});
First of all set display attribute of all divs to none:
<div class="buttons">
<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" style="display:none;">Lorum Ipsum1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>
Then toggle div like below:
jQuery(function(){
jQuery('.showSingle').click(function(){
$('.targetDiv').not('#div' + $(this).attr('target')).hide();
$('#div'+$(this).attr('target')).toggle();
});
});
You can do like below fiddle to achieve that:
https://jsfiddle.net/8pyovyqn/28/
So many answers already, but I think none of them work the way #Pravin wants it to work.
So here is my suggestion:
jQuery(function(){
jQuery('.showSingle').click(function(){
var objdiv = $('#div'+$(this).attr('target'));
var toggleDisplay = false;
if(objdiv.css('display')=="none"){
toggleDisplay = true;
}
jQuery('.targetDiv').hide();
objdiv.toggle(toggleDisplay);
});
});
Fiddle here...
HTML
<div class="linksrtitle">Lorem ipsum</div>
<div class="linksrspace"></div>
<div class="linksrwrap"> // this div should be slided
<a class="linkr" href="volim-da-stoje.php">Lorem ipsum</a>
<a class="linkr" href="ova-salate-je-umrla.php">Lorem ipsum</a>
<a class="linkr" href="nova-rasa.php">Lorem ipsum</a>
</div>
<div class="linksrspace"></div>
JS
$(".linksrtitle").click(function(){
$(this).next(".linksrwrap").slideToggle(); // doesn't work
});
Why this click event doesn't work. Console is empty.
Use nextAll()(with first(), if multiple sibling with same class are there) to get that. next() only select immediate following sibling.
$(".linksrtitle").click(function() {
$(this).nextAll(".linksrwrap").slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="linksrtitle">Lorem ipsum</div>
<div class="linksrspace"></div>
<div class="linksrwrap">// this div should be slided
<a class="linkr" href="volim-da-stoje.php">Lorem ipsum</a>
<a class="linkr" href="ova-salate-je-umrla.php">Lorem ipsum</a>
<a class="linkr" href="nova-rasa.php">Lorem ipsum</a>
</div>
<div class="linksrspace"></div>
How can i amend this code please so that the buttons change on the active. It's getting soemwhere with toggleClass but the button that was formerly active remains active.
<script type="text/javascript">
jQuery(function(){
jQuery('#showall').click(function(){
jQuery('.targetDiv').hide();
});
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).toggleClass( "greenactive"
).attr('target')).show();
});
});
</script>
my button code
<ul class="choose">
<li><a class="showSingle" target="1">Email Order</a></li>
<li><a class="showSingle" target="2">Order and Pay Now</a></li>
</ul>
the divs
<div id="div1" class="targetDiv" style="display:none">
content
</div>
<div id="div2" class="targetDiv" style="display:none">
content
</div>
style
a.greenactive {background:green}
use removeClass() before addclass()
$('.showSingle').click(function () {
$('.targetDiv').hide();
$('.showSingle').removeClass('greenactive');
$(this).addClass("greenactive")
$('#div' + $(this).attr('target')).show();
});
a.greenactive {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="choose">
<li>
<a class="showSingle" target="1">Email Order</a>
</li>
<li>
<a class="showSingle" target="2">Order and Pay Now</a>
</li>
</ul>
<div id="div1" class="targetDiv" style="display:none">content1</div>
<div id="div2" class="targetDiv" style="display:none">content2</div>
You just need to call removeClass() on all the .showSingle elements before toggling the class on the one which raised the event:
$('.showSingle').removeClass('greenactive');
Working example
Is there a way to show 2 Divs with the same id and class onClick with Jquery, cant solve this. (Div1/Class targetDiv)
Html:
<div class="buttons">
<a class="showSingle" data-target="1">Option 1</a> //With this
<a class="showSingle" data-target="2">Option 2</a>
<a class="showSingle" data-target="3">Option 3</a>
<a class="showSingle" data-target="4">Option 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum 1</div> //Show this
<div id="div1" class="targetDiv">Lorum Ipsum 1 Second</div> //And this
<div id="div2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>
Jquery:
$('.showSingle').on('click', function () {
$(this).addClass('selected').siblings().removeClass('selected');
$('.targetDiv').hide();
$('#div' + $(this).data('target')).show();
});
$('.showSingle').first().click();
Fiddle:
https://jsfiddle.net/XwN2L/5709/
Thank you so much for your Help!
It is not possible to have more than one occurrence of an ID on one page.
ID = Identifier
If you want to have the ability of "binding" the visibility of elements on you page, you could use data attributes with the same value.
For example:
<div class="links">
Group 1
Group 2
Group 3
</div>
<div class="some-class" data-id="group-1"></div>
<div class="some-class" data-id="group-1"></div>
<div class="some-class" data-id="group-2"></div>
<div class="some-class" data-id="group-3"></div>
<div class="some-class" data-id="group-2"></div>
Then:
var $links = $( '.links' ).find( 'a' );
$links.on( 'click', function ( e ) {
e.preventDefault();
var group = $( this ).attr( 'href' ).replace( '#', '' );
$( '.some-class' ).hide();
$( '.some-class[data-id="' + group + '"]' ).show();
});
I have a cover flow style carousel with 7 images:
<!-- ===== FLOW ===== -->
<div id="contentFlow" class="ContentFlow">
<!-- should be place before flow so that contained images will be loaded first -->
<div class="flow">
<a class="item" href="javascript:void(0);" id="toggle_value1"><img class="content" src="image1.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value2"><img class="content" src="image2.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value3"><img class="content" src="image3.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value4"><img class="content" src="image4.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value5"><img class="content" src="image5.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value6"><img class="content" src="image6.png"/></a>
<a class="item" href="javascript:void(0);" id="toggle_value4"><img class="content" src="image7.png"/></a>
</div>
</div>
It utilizes this carousel cover flow: http://jacksasylum.eu/ContentFlow/docu.php
I want to have a separate div completely separate from the carousel that changes with the current content (clicks on each image). Current content being the one in the middle that is the biggest (see website referenced above). The following would be the divs that show up and disappear according to which item is active in the carousel.
<div id="div1" style="display:none;"></div>
<div id="div2" style="display:none;"></div>
<div id="div3" style="display:none;"></div>
Need help with conceptualizing how I would do this.
One place to start is to put your divs (div1, div2, div3) inside a div with the class caption. contentflow shows the unique caption with each active item, so the caption with your divs will change on each change in the active item ( no need to display:none):
<div class="item"> <img class="content" src="someImageFile.jpg"/>
<div class="caption">
<div id="div1">Content1</div>
<div id="div2">Content2</div>
<div id="div3">Content3</div>
</div> </div>