how to create "see more" button [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I want to add "See more"button as below image:
here is my code :
<div class="main">
<ul class="list">
<li class="items">Friends </li>
<li class="items">Saved </li>
<li class="items">Pages </li>
<li class="items">Gruop </li>
<li class="items">Ad center</li>
<li class="items">Campus</li>
</ul>
</div>
I want when the length of the li tag document.querySelectorAll('.items').length > 4 then a button "See more" will appear to see the rest of the li card:
So are there any ways to do it, someone please help me. Thanks

Doing it with just CSS
.seeMoreCB,
.seeMoreCB + .list > .items:nth-child(n + 5) {
display: none;
}
.seeMoreCB:checked + .list > .seeMoreLi {
display: none;
}
.seeMoreCB:checked + .list > .items:nth-child(n + 5) {
display: list-item;
}
<div class="main">
<input type="checkbox" id="seeMoreCB" class="seeMoreCB" />
<ul class="list">
<li class="items">Friends </li>
<li class="items">Saved </li>
<li class="items">Pages </li>
<li class="items">Gruop </li>
<li class="seeMoreLi"><label for="seeMoreCB">See More</label></li>
<li class="items">Ad center</li>
<li class="items">Campus</li>
</ul>
</div>

When using a framework like react or angular that generates your html you would probably do the filtering on the list. However it looks like you want to use plain javascript. You could create the entire list and use classes on the ul tag to hide or show the extra elements.
Here the elements that are initially hidden have the class 'extra'. The ul element has the 'collapsed' class to start with. Clicking 'more' and 'less' toggle the collapsed and expanded classes on the ul element.
const ul = document.querySelector('ul.list');
const more = document.querySelector('ul.list > li.more');
const less = document.querySelector('ul.list > li.less');
more.addEventListener('click', event => {
ul.classList.remove('collapsed');
ul.classList.add('expanded');
});
less.addEventListener('click', event => {
ul.classList.add('collapsed');
ul.classList.remove('expanded');
});
.list.collapsed > .extra {
display: none;
}
.list.expanded > .more {
display: none;
}
.list > .more {
cursor: pointer;
}
.list > .less {
cursor: pointer;
}
<ul class="list collapsed">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li class="more">< more ></li>
<li class="extra">Item 5</li>
<li class="extra">Item 6</li>
<li class="extra">Item 7</li>
<li class="extra">Item 8</li>
<li class="extra">Item 9</li>
<li class="extra less">< less ></li>
</ul>

Related

How do I select previous siblings before specific class?

My react app is creating a list of steps:
let steps = this.props.formSteps.map((step, i) => {
let stepNum = i +1;
return (
<li className={ i == this.props.currentStepsIndex ? "steps__step active" : "steps__step"} key={"li-"+i}
onClick={this.handleClick.bind(this, i)}>
{step.name}
</li>
);
})
return(
<div className="steps-container">
<ul className="steps">
{steps}
</ul>
</div>
);
With 3 steps, the generated html looks something like this:
<ul class="steps">
<li class="steps__step">Step 1</li>
<li class="steps__step">Step 2</li>
<li class="steps__step active">Step 3</li>
</ul>
I want to select all the previous li steps before the active class and set the background to like green or something.
How do I accomplish this using css?
You may do something like this. You invert the logic and you select all next sibling to remove the background:
.steps__step {
background:green;
}
.active,
.active ~ .steps__step {
background:none;
}
<ul class="steps">
<li class="steps__step">Step 1</li>
<li class="steps__step">Step 2</li>
<li class="steps__step active">Step 3</li>
<li class="steps__step">Step 4</li>
<li class="steps__step">Step 5</li>
</ul>
I am not aware of any css selectors for sibling elements that come before a specific sibling. However, in your specific case you might get the desired result by selecting the elements without the "active" class.
Something like:
.steps__step:not(.active) {
background-color: green;
}

jQuery create an expandable unordered list with ul li with extra span tag

I would like to create an expandable tree with unordered list. The deepness is not limited in my case.
I have to keep the text in the list elements as it is, this way I need to add an extra span element to every parent to have a clickable item.
I have tried to add this span tag with jQuery, and this finds the li objects, but in the result only the first occurrance is visible.
The HTML code is this.
<ul class="list">
<li>
Categories
<ul>
<li>
Parent
<ul>
<li>link 1 link 2 link 3</li>
<li>link 1 link 2 link 3</li>
</ul>
</li>
<li>
Parent
<ul>
<li><a>Child 1</a></li>
<li><a>Child 2</a></li>
<li><a>Child 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
My jQuery script is below.
$(document).ready(function(){
$(".list").each(function () {
$(this).find('li').each(function(index, element){
var text = $(this).html();
text = "<span class=\"trigger\">+</span> " + text;
$(element).html(text);
});
});
$('.list > li span').click(function(){
$(this).parent().children('ul').toggle();
if($(this).text() == '+') {
$(this).text('-');
}
else {
$(this).text('+');
}
});
});
jsFiddle: https://jsfiddle.net/pegapega/2f20s90v/
My expected result would be for every li element:
<li><span class="trigger">+</span>[original content]</li>
Why the span element is not added to all of the li elements?
I'm unsure exactly why your code example didn't work, but here is an example that does work based on you original.
$('li').each(function(i, e){
$(e).prepend('<span class="trigger">+</span>');
});
$('span').on('click', function(e){
$(e.target).next('ul').toggleClass('show');
if( $(e.target).text() == '+') {
$(e.target).text('-');
} else {
$(e.target).text('+');
}
});
span.trigger {
cursor: pointer;
}
ul {
display: none;
list-style-type: none;
padding-left: 30px;
font-size: 18px;
font-family: "Open Sans", sans-serif;
}
ul.show {
display: block;
}
ul.list {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
<li>
Root
<ul>
<li>
Parent
<ul>
<li>link 1 link 2 link 3</li>
<li>link 1 link 2 link 3</li>
</ul>
</li>
<li>
Parent
<ul>
<li><a>Child 1</a></li>
<li><a>Child 2</a></li>
<li><a>Child 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Stackoverflows snippet editor seemed to have some problem with toggle() so I just replaced it with toggleClass() just so the example would work.

Multiple level selection bar

I am trying to do a multilevel selection bar. But I am not sure how to create this type of bar. I have tried to use the common navigation bar method, but is doesn't work out the way i wanted.
I want to do something like this, and here is the photo for references:
Any suggestion on how to do it? Or any similar examples? (Please show in fiddle example.)
Thank you!
You want to create a multi-level unordered list, with each list item that has children, containing another unordered list. E.G.
<ul class="parent">
<li>
Category
<ul class="child">
<li>
Sub-category
<ul class="grandchild">
<li>
Sub-sub-category
<ul class="great-grandchild">
<li>
sub-sub-sub category
</li>
</ul>
</li>
</ul>
</li>
<li>
Sub-category 2
</li>
</ul>
</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
then you would hide all of the children/grandchildren etc with css, and show them on parent:hover/active
ul:not('.parent') {
display: none;
}
ul.parent > li:hover > ul,
ul.child > li:hover > ul,
ul.grandchild > li:hover > ul,
ul.great-grandchild > li:hover > ul {
display: block;
}

DropDown list disappearing before user can the move mouse pointer to it

I have a menu with list items Home and Home 2. When I hover my mouse over "Home"/"Home 2", the dropdown list appears for the item as expected. However, when I am moving my mouse down to the dropdown list, the list disappears immediately and I cant get access to the dropdown menu.
I want the drop down list to be visible while moving my mouse down to the dropdown list preferably using jQuery. However, I cant get it to work.
The HTML Layout for the design is:
<ul class="mega">
<li class="grid">Home
<ul>
<li>DD Item 1</li>
<li>DD Item 2</li>
<li>DD Item 3</li>
</ul>
</li>
<li class="grid">Home2
<div class="dropDownClass"">
<ul>
<li>DD Item 4</li>
<li>DD Item 5</li>
<li>DD Item 6</li>
</ul>
</div>
</li> </ul>
Any help will be much appreciated.
Thanks
I would do something like this.
HTML:
<ul class="mega">
<li class="grid">Home
<ul>
<li>DD Item 1</li>
<li>DD Item 2</li>
<li>DD Item 3</li>
</ul>
</li>
<li class="grid">Home2
<ul>
<li>DD Item 4</li>
<li>DD Item 5</li>
<li>DD Item 6</li>
</ul>
</li>
CSS:
ul{
list-style-type: none;
}
.mega{
width: 200px;
}
.grid{
padding: 10px 15px;
background-color:gray;
color: white;
border: 1px solid black;
}
.grid ul{
display: none;
}
.grid:hover > ul{
display: inline;
}
Check out this fiddle to see it in action.
You need to setup your CSS to resemble this:
ul{list-style: none; padding: 3px; margin:0}
li ul{display:none;}
li.grid:hover ul{display:block}
This will hide the second ul until the li is hovered.
Add this in your document.ready function:
$('.grid1 ul').hide();
$('.grid2 ul').hide();
$('.grid1').on('mouseover', function() {
$('.grid1 ul').show();
$('.grid1').on('mouseout', function() {
$('.grid1 ul').hide();
});
});
$('.grid2').on('mouseover', function() {
$('.grid2 ul').show();
$('.grid2').on('mouseout', function() {
$('.grid2 ul').hide();
});
});
and change the value of the class attributes of the two <li> elements from both being grid to one of them being grid1 and the other being grid2.

How to properly structure lists with many sub-levels

I have a large navigation menu made using li and ul tags. The problem I have is that if I try to style individual items, it becomes very challenging because each li tag has multiple ul and li elements within it and therefore the style gets applied to everything within it. For example, I'm trying to highlight the first list item "SharePoint Demo Website" but that first item contains all the other items, it's an expandable/collapsible menu).
HTML:
<ul id="expList" class="list">
<li title="Sharepoint Demo Website" value="https://demo.ca" class="collapsed expanded active">Sharepoint Demo Website
<ul style="display: block;">
<li title="Academic" value="https://demo.ca/academic" class="collapsed">Academic
<ul style="display: none;">
<li title="Board Meetings" value="https://demo.ca/academic/bm">Board Meetings</li>
<li title="Committee" value="https://demo.ca/academic/cmtte">Committee</li>
<li title="Document Management" value="https://demo.ca/academic/dm">Document Management</li>
<li title="Project Management" value="https://demo.ca/academic/pm">Project Management</li>
</ul>
</li>
<li title="Archive" value="https://demo.ca/archive">Archive</li>
<li title="Associations" value="https://demo.ca/associations" class="collapsed">Associations
<ul style="display: none;">
<li title="Board Meetings" value="https://demo.ca/associations/bm">Board Meetings</li>
<li title="Document Management" value="https://demo.ca/associations/dm">Document Management</li>
<li title="Project Management" value="https://demo.ca/associations/pm">Project Management</li>
</ul>
</li>
<li title="Developer" value="https://demo.ca/cdn">Developer</li>
<li title="Person test" value="https://demo.ca/cf_test">Person test</li>
<li title="Charity" value="https://demo.ca/charity" class="collapsed">Charity
<ul style="display: none;">
<li title="Board of Directors" value="https://demo.ca/charity/bod" class="collapsed">Board of Directors
<ul style="display: none;"><li title="Board Documents" value="https://demo.ca/charity/bod/boarddocs">Board Documents</li>
<li title="Meeting Materials" value="https://demo.ca/charity/bod/mtgmaterial">Meeting Materials</li>
</ul>
</li>
</ul>
</li>
<li title="demo" value="https://demo.ca/clite" class="collapsed">demo
<ul style="display: none;"><li title="administrator" value="https://demo.ca/clite/admin">administrator
</li>
</ul>
</li>
<li title="Company" value="https://demo.ca/company" class="collapsed">Company
<ul style="display: none;"><li title="Finance" value="https://demo.ca/company/finance">Finance</li>
<li title="Human Resources" value="https://demo.ca/company/hr" class="collapsed">Human Resources
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
#expList ul li:hover{
background-color: #eee;
}
This is what it looks like:
This is the code that creates the list:
function traverseMap(obj, element) {
for (var key in obj) {
var item = obj[key];
var li = $('<li>', {
text: item.title,
title: item.title,
value: item.url
}).appendTo(element);
if (!$.isEmptyObject(item.children)) {
var ul = $('<ul>').appendTo(li);
traverseMap(item.children, ul);
}
}
}
traverseMap(map, $('#expList'));
}
You can use > to affect only immediate children, like this:
#expList ul > li:hover{
background-color: #eee;
}
or this:
#expList > ul > li:hover{
background-color: #eee;
}
or use the :first-child pseudo selector for just the first child:
#expList ul li:first-child:hover
{
background-color:yellow;
}
depending on what you want. You could also use class names.
The way you have right now it won't work, because the whole node will get highlighted, what you need to do is to give an extra mark up to the text you wanna highlight, for example :
<li title="Academic" value="https://demo.ca/academic" class="collapsed">
<span>Academic</span>
<ul style="display: none;">
<li title="Board Meetings" value="https://demo.ca/academic/bm">Board Meetings</li>
<li title="Committee" value="https://demo.ca/academic/cmtte">Committee</li>
<li title="Document Management" value="https://demo.ca/academic/dm">Document Management</li>
<li title="Project Management" value="https://demo.ca/academic/pm">Project Management</li>
</ul>
</li>
then :
#expList ul > li:hover > span{
background-color: #eee;
}
Given that <li title="Sharepoint Demo Website" value="https://demo.ca" class="collapsed expanded active"> contains a text node and children elements, a rule that styles the li will also apply to its children.
If you want to style the text node ("Sharepoint Demo Website") independently you will have to wrap it in an element which you can target specifically.
<ul id="expList" class="list">
<li title="Sharepoint Demo Website" value="https://demo.ca" class="collapsed expanded active">
<span>Sharepoint Demo Website</span>
<ul style="display: block;">
<li title="Academic" value="https://demo.ca/academic" class="collapsed">Academic
<ul style="display: none;">
You could now apply a rule to the text node via the span
#expList li > span {
background-color:#fee;
}
See jsfiddle.

Categories

Resources