I have a problem, I need to hide all divs inside parent div except the first one.
Problem is, divs have no ID or anything.
Is there a possible way how to do it? Preferably by CSS or pure JS?
<div role="list" class="slds-form">
<div class="slds-grid">Visible</div>
<div class="slds-grid">Hide</div>
<div class="slds-grid">Hide</div>
</div>
Thank you for any advice :)
Use nth-child:
.slds-form > div:nth-child(n + 2) {
display: none;
}
<div role="list" class="slds-form">
<div class="slds-grid">Visible</div>
<div class="slds-grid">Hide</div>
<div class="slds-grid">Hide</div>
</div>
This will work for you:
you can combine child selection(:first-child) with :not to attain
the result you want.
.slds-form > div:not(:first-child) {
display: none;
}
<div role="list" class="slds-form">
<div class="slds-grid">Visible</div>
<div class="slds-grid">Hide</div>
<div class="slds-grid">Hide</div>
</div>
Hope this was helpfull for you.
You can use :not(:first-child):
.slds-form>div:not(:first-child) {
display: none;
}
<div role="list" class="slds-form">
<div class="slds-grid">Visible</div>
<div class="slds-grid">Hide</div>
<div class="slds-grid">Hide</div>
</div>
Can add an extra class to toggle show hide.
.slds-hide {
display: none;
}
.slds-show {
display: block;
}
<div role="list" class="slds-form">
<div class="slds-grid slds-show">Visible</div>
<div class="slds-grid slds-hide">Hide</div>
<div class="slds-grid slds-hide">Hide</div>
</div>
Related
I have been trying badly to wrap some divs with an outer div so that I can style them. But I'm unable to do so thus far.
I have this list div which contains some inner divs that I need to wrap. That is the inner divs which have same letters need to be bundled together. Although targeting the divs with the letters is not a good idea as they are gonna be dynamic.
This is an example of what I have been trying to achieve:
<div class="list-wrapper">
<div class="el">A</div>
<div>
<a>A</a>
</div>
</div>
<div class="list-wrapper">
<div class="el">C</div>
<div>
<a>C</a>
</div>
<div>
<a>C</a>
</div>
</div>
Another example:
This is what I have tried so far:
$(list).find('div.el').each(function(idx, item) {
$(item).nextAll('div').wrapAll('<div class="list-wrapper"></div>')
});
.wrapper {
background-color: red;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
<div class="el">A</div>
<div>
<a>A</a>
</div>
<div class="el">B</div>
<div>
<a>B</a>
</div>
<div class="el">C</div>
<div>
<a>C</a>
</div>
<div>
<a>C</a>
</div>
<div class="el">D</div>
<div>
<a>D</a>
</div>
<div>
<a>D</a>
</div>
<div>
<a>D</a>
</div>
<div class="el">E</div>
<div>
<a>E</a>
</div>
</div>
To achieve your goal you can use a combination of nextUntil() within the loop, to get the div elements between each .el, and wrapAll(). You can include addBack() in there to add the current .el in the loop in to the collection to be wrapped. Try this:
$('#list').find('.el').each((i, el) => {
$(el).nextUntil('.el').addBack().wrapAll('<div class="list-wrapper"></div>')
});
.wrapper {
background-color: red;
padding: 20px;
}
.list-wrapper { border: 1px solid #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
<div class="el">A</div>
<div><a>A</a></div>
<div class="el">B</div>
<div><a>B</a></div>
<div class="el">C</div>
<div><a>C</a></div>
<div><a>C</a></div>
<div class="el">D</div>
<div><a>D</a></div>
<div><a>D</a></div>
<div><a>D</a></div>
<div class="el">E</div>
<div><a>E</a></div>
</div>
Note that $(list) was only working by proxy, as elements with an id attribute are available as properties on the document. It's much better practice to use a valid string selector.
Pretty simple question, but I've been staring at this code for way too long that I've become code blind and can't see what I'm doing wrong here.
I'm simply trying to make a horizontal list of 2 image thumbnails within a modal using Angular's ng-repeat. Here is the HTML for it:
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form name="socreForm">
<div ng-hide="hasScreenshot === true"></div>
<h3>Screenshots</h3>
<ul class = "imgList">
<li ng-repeat="item in screenshots">
<div style="text-align: center;">User: {{item.user}}</div>
<img class="thumbnail" ng-src = "{{item.imageURL}}">
</li>
</ul>
<h3>Outcome</h3>
<div>
<input type="radio" ng-model="formData.outcome" name="outcome" ng-value="'1'">
<label>Win</label>
</div>
<div>
<input type="radio" ng-model="formData.outcome" name="outcome" ng-value="'2'">
<label>Lose</label>
</div>
</form>
</div>
</div>
</div>
And here is the CSS I'm trying to use:
.imgList {
li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
}
.thumbnail {
width: 40%
}
I've been fiddling with this for a while now and I simply cannot make it appear horizontally. This is what it looks like when it renders:
What silly CSS thing am I missing? Thank you in advance for any help!
Replace <div style="text-align: center;">User: {{item.user}}</div> with <span style="text-align: center;">User: {{item.user}}</span>
or add CSS rule like:
.imgList div {
display: inline; //or inline-block
}
Divs are display: block by default (user agent stylesheet)
I have a child div that needs to be added with a class using jQuery.
<div class="main-content">
<article class="post status-publish">
<div class="post-content>
<div class="vc_row wpb_row vc_row-fluid">
<div class="vc_col-sm-12 wpb_column vc_column_container ">
</div>
</div>
</div>
</article>
</div>
The jQuery code that i tried so far is this:
j('.main-content .post-content').each(function () {
j(this).after().addClass('home-inner-content');
});
This is the result that i am desiring for:
<div class="main-content">
<article class="post status-publish">
<div class="post-content>
<div class="vc_row wpb_row vc_row-fluid home-inner-content">
<div class="vc_col-sm-12 wpb_column vc_column_container ">
</div>
</div>
</div>
</article>
</div>
Any help is appreciated. Thanks
You probably want something like:
j('.main-content .post-content').each(function () {
j(this).children().first().addClass('home-inner-content');
});
.after() is for inserting content, not locating it.
But really, I don't think you need a loop. You can do:
j('.main-content .post-content > *:first-child').addClass('home-inner-content');
The first part selects the elements you want. .addClass() adds a class to each of the elements that got selected.
If I understand you correctly, next code will help.
$('.main-content .post-content>div').addClass('home-inner-content');
$('.main-content .post-content').each(function() {
$(this).children().addClass('home-inner-content');
});
body * {
padding-left: 1em;
}
body *:before {
font-family: monospace;
content: attr(class);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-content">
<article class="post status-publish">
<div class="post-content">
<div class="vc_row wpb_row vc_row-fluid">
<div class="vc_col-sm-12 wpb_column vc_column_container">
</div>
</div>
</div>
</article>
</div>
You don't need to use each function here.
j('.main-content .post-content>div').addClass('home-inner-content');
I have a container div names wrapper and it has several child divs named thumb
I want to apply css pseudo elements with the even and odd.
My codes are
<div class="wrapper">
<div class="col-half">
<div class="thumb">
...
</div>
</div>
<div class="col-half">
<div class="thumb">
...
</div>
</div>
<div class="col-half">
<div class="thumb">
...
</div>
</div>
<div class="col-half">
<div class="thumb">
...
</div>
</div>
</div>
And my css:
.wrapper:nth-child(even) .thumb:after{
//some codes
}
.wrapper:nth-child(odd) .thumb:after{
//some codes
}
But i am getting only odd styles.
Since the odd and even relationship is applied based on sibling index, you need to apply it on col-half as that is the repeated element.
Since your thumb element is the first child of its parent, it will only satisfy the odd selector
.wrapper .col-half:nth-child(even) .thumb:after {
content: 'x'
}
.wrapper .col-half:nth-child(odd) .thumb:after {
content: 'y'
}
<div class="wrapper">
<div class="col-half">
<div class="thumb">
...
</div>
</div>
<div class="col-half">
<div class="thumb">
...
</div>
</div>
<div class="col-half">
<div class="thumb">
...
</div>
</div>
<div class="col-half">
<div class="thumb">
...
</div>
</div>
</div>
You have a misunderstanding about :nth-child as it does not work as "nth child of this container" but as "am I the nth child of my parent?".
So you need to apply :nth-child(odd/even) to .col-half:
.col-half:nth-child(even) .thumb:after{
//some codes
}
.col-half:nth-child(odd) .thumb:after{
//some codes
}
The name for this selector has really caused many misunderstandings as it is too easy to misunderstand the way you did.
.col-half:nth-child(even) {
color: green;
}
.col-half:nth-child(odd) {
color: red;
}
Try like this: Demo
In your css, You are using the parent div for showing even and odd. Instead you need to use odd / even for child elements which repeats
.col-half:nth-child(even) .thumb{
background:#ccc;
}
.col-half:nth-child(odd) .thumb{
background:#f00;
}
Try This One
.wrapper .col-half:nth-child(2n) .thumb:after {
content: '';
}
.wrapper .col-half:nth-child(2n-1) .thumb:after {
content: '';
}
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>