html
<div class="channel">
<div class="programs" id="p1"></div>
<div class="selec_pro" id="s1" style="display:none;"></div>
<div class="programs" id="p2"></div>
<div class="selec_pro" id="s2" style="display:none;"></div>
<div class="programs" id="p3"></div>
<div class="selec_pro" id="s3" style="display:none;"></div>
<div class="programs" id="p4"></div>
<div class="selec_pro" id="s4" style="display:none;"></div>
</div>
The div element under class channel are created dynamically. On focus
of class programs, selec_pro next to that class program div needs to
be display block. After that focus off selec_pro needs to be display
none.
Can anyone help ?
Try this in CSS:
.selec_pro {
display: none;
}
.programs:focus + .selec_pro {
display: block;
}
The + is the CSS adjacent sibling selector. See here: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
Related
I have multiple divs in html such:
<div class="litter">
<div class="litter-1">
<div class="status">Available</div>
<div class="available"><img /></div>
</div>
<div class="litter-2">
<div class="status">Available</div>
<div class="available"><img /></div>
</div>
</div>
The status text will vary based on user input. If the status is available the available class should not show. But if the status is unavailable then it should. The image is present all the time but only displaying if the status changes.
I can get the jQuery to either hide all of the images, or show them all, but not based on the html value of the status.
jQuery
if($('.litter > .status').html()==="Available") {
$(this).next('.available').hide();
} else {
$('.available').show();
}
Any help?
You could use a loop using jQuery .each():
// change selector to '.litter .status'
$('.litter .status').each(function() {
// loop through each .status element
// get partner img container .available
var imgContainer = $(this).parent().find('.available');
if ($(this).text() === "Available")
{
imgContainer.hide();
}
else
{
imgContainer.show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="litter">
<div class="litter-1">
<div class="status">Available</div>
<div class="available"><img src="https://via.placeholder.com/150/" alt="placeholder1" /></div>
</div>
<div class="litter-2">
<div class="status">Other status</div>
<div class="available"><img src="https://via.placeholder.com/150/" alt="placeholder2" /></div>
</div>
</div>
You can toggle a single class, status-available, and combine it with the adjacent sibling combinator to control the display of the image.
<!-- Image will show -->
<div class="status status-available">…</div>
vs.
<!-- Image will not show -->
<div class="status">…</div>
Example
/* Image is hidden by default */
.available > img {
display: none;
}
/* Adjacent sibling combinator in action */
.status-available + .available > img {
display: block;
}
<div class="litter">
<div class="litter-1">
<div class="status status-available">Available</div>
<div class="available">
<img src="http://placekitten.com/150/150" alt="Cute cat" />
</div>
</div>
<div class="litter-2">
<div class="status">Available</div>
<div class="available">
<img src="http://placekitten.com/150/150" alt="Cute cat" />
</div>
</div>
</div>
Ok, so Haldo put me on the right track, but in order to make it all come together with the string. Instead of if ($(this).text() === ("Available") I had to use this if ($(this).text().indexOf('Needs a Forever Home') > -1)
The rest of the code stays the same as Haldo's.
Given the code segment below, is there a way to write a CSS selector that targets the div of class="item_text" provided that the checkbox is checked?
<div class="row">
<div class="col-xs-1">
<input name="item_checkbox" type="checkbox" />
</div>
<div class="col-xs-11">
<div class="item_text" contenteditable="true">
To rearrange your list, drag and drop items
</div>
</div>
</div>
As has been stated in the comments, it's not possible to do this in CSS alone as CSS rules cannot traverse up the DOM.
As you've tagged the question with jQuery, you could use that instead to affect the required element when the checkbox state is changed. Try this:
$('.row :checkbox').change(function() {
$(this).closest('.row').find('.item_text').toggleClass('foo', this.checked);
});
.foo { border: 1px solid #C00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-1">
<input name="item_checkbox" type="checkbox" />
</div>
<div class="col-xs-11">
<div class="item_text" contenteditable="true">
To rearrange your list, drag and drop items
</div>
</div>
</div>
This is possible. I just rearranged the dom slightly then added some css:
input[name=item_checkbox]:checked + div.item_text {
display:none;
}
<div class="row">
<div class="col-xs-11">
<input name="item_checkbox" type="checkbox" />
<div class="item_text" contenteditable="true">
To rearrange your list, drag and drop items
</div>
</div>
</div>
That's only possible with jQuery/javascript as CSS selectors cannot traverse upwards (from child to parent).
Hi i have some code that needs to be hidden. I have tried the code below, but that not fit on my scenario.
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">Want to hid this div</div>
<div style=""/>Want to hid this div too </div>
</div>
I want to hide the last div but this div doesn't have an id or class. I also can't use the div:first(or :eq(0)').hide() method as there are lot of divs and it's not possible to tell which nth-child this div will be. Is there any method to link with zoomer div and hide it? Thanks
Both examples are with background-color: red just for the example.
You can use the :last-child pseudo-class:
#zoomer div:last-child {
background: red;
}
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
Same with jquery:
$(function() {
$('#zoomer div:last-child').css('background', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
update
After the change of the question - this will hide the last 2 divs:
#zoomer div:last-child, #zoomer div:nth-last-child(2) {
background: red;
}
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
You can user here :last-child, :nth-child pseudo-class
#zoomer div:last-child{display:none}
#zoomer2 div:nth-child(4){display:none;}
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
<div id="zoomer2" style="margin-top:20px" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
I want to hide the last div but this div have no id or class
you can use the last-child pseudo class or last method of jquery
$("#zoomer div").last().remove();
or hide
$("#zoomer div").last().hide();
To hide the second last div also using prev
$("#zoomer div").last().prev().hide();
with css you can hide the last 2 div
#zoomer:nth-last-child(-n+2) {
display: none
}
You can use CSS :nth-child() selector or :last-child selector.
Example:
#zoomer div:nth-child(4) {
display: none;
}
<div id="zoomer">
<div class="nice">Which show image</div>
<img src="" id="img" />
<div style="">nice to see it</div>
<div>Want to hid this div</div>
</div>
Use :last-child pseudo class on #zoomer and set in display: none and it works
So I have this
<div class="btns">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
<div class="btn4"></div>
</div>
<div class="prevs">
<div class="pre1"></div>
<div class="pre2"></div>
<div class="pre3"></div>
<div class="pre4"></div>
</div>
http://jsfiddle.net/uzpxjukv/
You have btn1, btn2, btn3 and btn4. I'm trying to make it so that when you press btn1, the div with the class pre1 should then get "display: block;" or something to make it visible. Then when btn2 is clicked, pre1 turns invisible again and pre2 turns visible.
Maybe something like this? If there will be more buttons, it should be more optimalized.
$('.btns').find('div').click(function(){
$('.prevs').find('div').eq($(this).index()).toggle();
});
$('.btns').find('div').click(function(){
$('.prevs').find('div').eq($(this).index()).toggle();
});
.prevs div:not(.pre1) {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
<div class="btn1">Button 1</div>
<div class="btn2">Button 2</div>
<div class="btn3">Button 3</div>
<div class="btn4">Button 4</div>
</div>
<div class="prevs">
<div class="pre1">Previews 1</div>
<div class="pre2">Previews 2</div>
<div class="pre3">Previews 3</div>
<div class="pre4">Previews 4</div>
</div>
JSFIDDLE DEMO -> http://jsfiddle.net/uzpxjukv/5/
$('.btns div').click(function() {
var classNumber = this.className.slice(-1);
$('.prevs div').hide();
$('.pre' + classNumber).show();
});
On click of the button div, first hide all the pre divs and then show only the relevant div.
Try it
$('.btns > div').on('click', function() {
var numberOfDiv = $(this).attr('class').slice('-1'),
prevs = $('.prevs');
prevs.find('> div').hide();
prevs.find('.pre' + numberOfDiv).show();
});
This example is with your html code, if is possible to change it, you can get a better code.
See the fiddle
I have changed your HTML a little bit..Changed the class attribute of the prevs divsti ids.
HTML
<div class="btns">
<div class="btn1" id="1" onClick="reply_click(this.id)"></div>
<div class="btn2" id="2" onClick="reply_click(this.id)"></div>
<div class="btn3" id="3" onClick="reply_click(this.id)"></div>
<div class="btn4" id="4" onClick="reply_click(this.id)"></div>
</div>
<div class="prevs">
<div id="pre1"></div>
<div id="pre2"></div>
<div id="pre3"></div>
<div id="pre4"></div>
</div>
JS
function reply_click(id) {
document.getElementById("pre" + id).style.display = "block";
}
Provided that you know what naming system the divs use, you could use something along these lines. (To see properly working, view using developer tool)
$('.btns div').on('click', function() {
var currClass = $(this).attr('class').slice(-1); //get end of number of div clicked
$('.prevs div').css('display', 'none'); //reset all divs to being hidden
$('.pre' + currClass).css('display', 'inline-block'); //show desired div
});
.btns div {
background-color: gray;
}
.btns div, .prevs div {
width: 2em;
height: 2em;
display: inline-block;
padding-right: 0.2em;
}
.prevs div {
background-color: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
<div class="btn4"></div>
</div>
<div class="prevs">
<div class="pre1"></div>
<div class="pre2"></div>
<div class="pre3"></div>
<div class="pre4"></div>
</div>
I have the following divs, At the moment when the first one is changed the the corresponding div id in the second divs has its display property changed from none to block as they all start out as none.
First Div
<div class="carousel">
<div class="item active" id="ZS125-48A">...</div>
<div class="item" id="FFKG-34">...</div>
<div class="item" id="DSSS-56">...</div>
<div class="item" id="ZSFD-48A">...</div>
</div>
Second Div
<section class="contentBikeTabbedMenus">
<div id="ZS125-48ATab" class="active" style=" display: block;">...</div>
<div id="FFKG-34Tab" class="" style=" display: block;">...</div>
<div id="DSSS-56Tab" class="" style=" display: block;">...</div>
<div id="ZSFD-48ATab" class="" style=" display: block;">...</div>
</section>
So the varible tabId1 has the id of the first active div and it finds the second div with the same name but with the word 'Tab' appended to it. It then changes its display property and adds the active class.
if($(tabId1).css('display') != 'block') {
$(tabId1).css("display", "block").addClass('active');
}
How could i work it so that after this if, all the divs under <section class="contentBikeTabbedMenus"> which dont have the id in the varible tabId1, i can change the css of them from display block to none.
How about hiding them all first and then showing only the selected div?
$(".contentBikeTabbedMenus div").removeClass("active").hide();
if($(tabId1).css('display') != 'block') {
$(tabId1).css("display", "block").addClass('active');
}
if( ! $(tabId1).is(':visible') ) {
$('.contentBikeTabbedMenus').hide()
$(tabId1).show().addClass('active');
}