How to hide first level span element by CSS ">" selector - html

Here is my HTML code
.wrapper.mini-menu .sidebar-nav li > span{
display: none;
}
<div class="wrapper mini-menu">
<div class="header"></div>
<div class="sidebar">
<ul class="sidebar-nav">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>Hide Item1</span>
<i class="fa arrow pull-right"></i>
</a>
<ul class="sub-menu">
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 1</span>
</a>
</li>
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 2</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#item1">
<i class="fa fa-dashboard"></i>
<span>Hide Item2</span>
</a>
</li>
<li>
<a href="#item1">
<i class="fa fa-cogs"></i>
<span>Hide Item3</span>
</a>
</li>
</ul>
</div>
</div>
I want to hide hide item1, hide item2 and hide item3. But I don't want to hide show items. If I don't use > selector it hides all span elements. How to select only those item by CSS > selector?

What your current CSS selector is saying is:
Hide all spans that are children of li that are descendants of .sidebar-nav. If you only want to target first level li elements do this instead:
.wrapper.mini-menu .sidebar-nav > li > a > span {
display: none;
}

Look:
.wrapper.mini-menu .sidebar-nav > li > a{
display: none;
}
<div class="wrapper mini-menu">
<div class="header"></div>
<div class="sidebar">
<ul class="sidebar-nav">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>Hide Item1</span>
<i class="fa arrow pull-right"></i>
</a>
<ul class="sub-menu">
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 1</span>
</a>
</li>
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 2</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#item1">
<i class="fa fa-dashboard"></i>
<span>Hide Item2</span>
</a>
</li>
<li>
<a href="#item1">
<i class="fa fa-cogs"></i>
<span>Hide Item3</span>
</a>
</li>
</ul>
</div>

You select a span standing right after the .fa-user-plus icon with the + selector , but not so sure this what you look for ?
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
span {
display:none;
}
.fa.fa-user-plus + span{
display: inline-block;
}
<div class="wrapper mini-menu">
<div class="header"></div>
<div class="sidebar">
<ul class="sidebar-nav">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>Hide Item1</span>
<i class="fa arrow pull-right"></i>
</a>
<ul class="sub-menu">
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 1</span>
</a>
</li>
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 2</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#item1">
<i class="fa fa-dashboard"></i>
<span>Hide Item2</span>
</a>
</li>
<li>
<a href="#item1">
<i class="fa fa-cogs"></i>
<span>Hide Item3</span>
</a>
</li>
</ul>
</div>
</div>

Related

Auto hide <ul> listing on load using jQuery

How can I automatically show this listing collapsed without modifying the HTML structure? This means I want to collapse all the folders of the tree.
And initially, instead of showing this:
I want to this:
This is my try with no luck:
$('#master-ul').hide()
$('#master-ul').on('click', 'li', function() {
$(this).find('ul').slideToggle();
return false
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<ul id="master-ul">
<li class="folder">
<i class="fa fa-folder"></i> first_folder
<ul>
<li class="file"><i class="fa fa-file"></i> jose.dat</li>
<li class="folder">
<i class="fa fa-folder"></i> second_folder
<ul>
<li class="file"><i class="fa fa-file"></i> as.dat</li>
</ul>
</li>
<li class="folder">
<i class="fa fa-folder"></i> third_folder
<ul>
<li class="file "><i class="fa fa-file "></i> a.dat</li>
<li class="file "><i class="fa fa-file "></i> b.dat</li>
</ul>
</li>
</ul>
</li>
</ul>
PS: There can be more than one root folder. This means that having more than one first_folder in the example.
Why don't use css then use jq for change that?
$('#master-ul').on('click', 'li', function() {
$('#secondlvl').slideToggle();
return false
});
$('.folder').on('click', 'li', function() {
$(this).find('ul').slideToggle();
return false
});
#master-ul li ul {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<ul id="master-ul">
<li class="folder">
<i class="fa fa-folder"></i> first_folder
<ul id='secondlvl'>
<li class="file"><i class="fa fa-file"></i> jose.dat</li>
<li class="folder">
<i class="fa fa-folder"></i> second_folder
<ul>
<li class="file"><i class="fa fa-file"></i> as.dat</li>
</ul>
</li>
<li class="folder">
<i class="fa fa-folder"></i> third_folder
<ul id="thirdlvl">
<li class="file "><i class="fa fa-file "></i> a.dat</li>
<li class="file "><i class="fa fa-file "></i> b.dat</li>
</ul>
</li>
</ul>
</li>
</ul>
Edit:
Add #secondlvl for control the first slideToggle()
Additional:
If you don't want secondlvl id you can use $('#master-ul > li > ul').slideToggle(); instead of $('#secondlvl').slideToggle(); for slide the first ul.
$('#master-ul').on('click', 'li', function() {
$('#master-ul > li > ul').slideToggle();
return false
});
$('.folder').on('click', 'li', function() {
$(this).find('ul').slideToggle();
return false
});
#master-ul li ul {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<ul id="master-ul">
<li class="folder">
<i class="fa fa-folder"></i> first_folder
<ul>
<li class="file"><i class="fa fa-file"></i> jose.dat</li>
<li class="folder">
<i class="fa fa-folder"></i> second_folder
<ul>
<li class="file"><i class="fa fa-file"></i> as.dat</li>
</ul>
</li>
<li class="folder">
<i class="fa fa-folder"></i> third_folder
<ul id="thirdlvl">
<li class="file "><i class="fa fa-file "></i> a.dat</li>
<li class="file "><i class="fa fa-file "></i> b.dat</li>
</ul>
</li>
</ul>
</li>
</ul>

Place Each 2 elements of unordered list on a single line

I have this unordered list and on phones with small screen width I want to place each 2 items on a single line, how can I implement that? thanks in advance.
<a href="mailto:shouman882#gmail.com" class="footer_link">
shouman882#gmail.com
</a>
<ul class="social_list">
<li class="social_list_item"> <a class="social_list_item_link" href="https://www.facebook.com/samtshouman">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="social_list_item"> <a class="social_list_item_link" href="https://github.com/SamShouman">
<i class="fab fa-github">
</i>
</a> </li>
<li class="social_list_item"> <a class="social_list_item_link" href="https://instagram.com/sam_shmn98?igshid=1k437cycqmauk">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="social_list_item"> <a class="social_list_item_link" href="https://api.whatsapp.com/send?phone=96103943517&source=&data=&app_absent=">
<i class="fab fa-whatsapp"></i>
</a>
</li>
</ul>
You can do something like this, it will wrap last 2 items when screen size decreases.
.social_list {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.first,
.second {
display: flex;
padding: 10px;
}
.first li,
.second li {
margin: 15px;
}
<a href="mailto:shouman882#gmail.com" class="footer_link">
shouman882#gmail.com
</a>
<ul class="social_list">
<div class="first">
<li class="social_list_item">
<a class="social_list_item_link" href="https://www.facebook.com/samtshouman">
<i class="fab fa-facebook"></i>Facebook
</a>
</li>
<li class="social_list_item">
<a class="social_list_item_link" href="https://github.com/SamShouman">
<i class="fab fa-github">GitHub
</i>
</a>
</li>
</div>
<div class="second">
<li class="social_list_item">
<a class="social_list_item_link" href="https://instagram.com/sam_shmn98?igshid=1k437cycqmauk">
<i class="fab fa-instagram"></i> Instagram
</a>
</li>
<li class="social_list_item">
<a class="social_list_item_link" href="https://api.whatsapp.com/send?phone=96103943517&source=&data=&app_absent=">
<i class="fab fa-whatsapp"></i>Whatsapp
</a>
</li>
</div>
</ul>
Just need to add width: 50%; float: left; to the .social_list_item class with suitable media queries. The sample for a small width screen.
Refer this : https://www.w3schools.com/css/css_rwd_mediaqueries.asp
/* You need to add suitable media queries for mobile devices. */
#media screen and (max-width: 480px) {
li.social_list_item {
width: 50%;
float: left;
}
}
<a href="mailto:shouman882#gmail.com" class="footer_link">
shouman882#gmail.com
</a>
<ul class="social_list">
<li class="social_list_item"><a class="social_list_item_link" href="https://www.facebook.com/samtshouman">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="social_list_item"><a class="social_list_item_link" href="https://github.com/SamShouman">
<i class="fab fa-github">
</i>
</a></li>
<li class="social_list_item"><a class="social_list_item_link"
href="https://instagram.com/sam_shmn98?igshid=1k437cycqmauk">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="social_list_item"><a class="social_list_item_link"
href="https://api.whatsapp.com/send?phone=96103943517&source=&data=&app_absent=">
<i class="fab fa-whatsapp"></i>
</a>
</li>
</ul>

Remove text inside span

I want to remove time + icon shown in my blog page
<span><i class="fa fa-newspaper-o"></i>47 sec read</span>
I have tried using
.fa-newspaper-o{display:hidden}
but it only hides the icon before "47 sec" leaves the text displayed
Whole code
<ul class="list-inline">
<li><span class="posted-in"> <a class="national" href="http://www.fact-file.com/category/national/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&customize_messenger_channel=preview-0" rel="category tag" style="background-color: #1abc9c">National</a>
<a class="top" href="http://www.fact-file.com/category/top/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&customize_messenger_channel=preview-0" rel="category tag" style="">Top Story</a>
</span></li>
<li>
<span class="right"><span class="zilla-likes-count">0</span> <span class="zilla-likes-postfix"></span></span>
</li>
<li>
<span class="post-comments-number">
<i class="fa fa-comment-o"></i>0 </span>
</li>
<li><span><i class="fa fa-newspaper-o"></i>47 sec read</span></li>
</ul>
.list-inline li:nth-child(4) { display: none;} or .list-inline li:last-child { display: none;} will hide the list item in question.
To add to the above, you can use visibility: hidden if you want the removed element to still leave a footprint (take up space).
var li=document.getElementsByTagName('li');
li[li.length-1].style.visibility='hidden';
<ul class="list-inline">
<li><span class="posted-in"> <a class="national" href="http://www.fact-file.com/category/national/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&customize_messenger_channel=preview-0" rel="category tag" style="background-color: #1abc9c">National</a>
<a class="top" href="http://www.fact-file.com/category/top/?customize_changeset_uuid=2a4ce41e-5aad-4e11-bb78-50c7e06dd416&customize_messenger_channel=preview-0" rel="category tag" style="">Top Story</a>
</span></li>
<li>
<span class="right"><span class="zilla-likes-count">0</span> <span class="zilla-likes-postfix"></span></span>
</li>
<li>
<span class="post-comments-number">
<i class="fa fa-comment-o"></i>0 </span>
</li>
<li><span><i class="fa fa-newspaper-o">47 sec read</i></span></li>
</ul>

Set div by default active

I have 3 div's and 3 buttons each button on click reveals one div but what im trying to achieve is to set div-nr1 to be by default displayed
this is the angular code that im using...
var app = angular.module('app',[]);
app.controller('Test',function($scope){
$scope.show = 1;
});
this are buttons
<ul>
<li class="has-subnav" ng-click="show = 1">
<a routerLink="/dashboard">
<i class="fa fa-home fa-2x"></i>
</a>
</li>
<li class="has-subnav" ng-click="show = 2">
<a routerLink="/projects">
<i class="fa fa-laptop fa-2x"></i>
</a>
</li>
<li class="has-subnav"ng-click="show = 3" >
<a routerLink="/teams" >
<i class="fa fa-users" aria-hidden="true"></i>
</a>
</li>
</ul>
and this is one of the div's
<div class="information-boxes" ng-show="show==1">
<ul class="box-docs" >
<li>
<div class="docImages">
<img src="../assets/images/lp.png" alt="">
</div>
Couldn't you just init the show variable in the markup like below?
<div ng-controller="MyController" ng-init="show=1">

Foundation - Top Bar and Icon Bar in one template

I'm working on Foundation Zurb template and I'm trying to get it working.
I have Top Bar at the top of the screen (full width), Icon Bar at the left side (full height). I know that Foundation has 12 grid system.
According to Foundation:
The Foundation Top Bar gives you a great way to display a complex
navigation bar on small, medium or large screens.
And:
An Icon Bar provides a menu to quickly navigate an app. Use the Icon
Bar horizontally or vertically, with the labels below the icons or to
the right. Have it your way.
Here is my template. I've took out div.large-9.columns etc.. Because they were braking the view.
<!-- Navigation -->
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>LOGO PLACEHOLDER</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><i class="fa fa-diamond"></i> Go PRO</li>
<li class="has-dropdown">
<i class="fa fa-user"></i> My Account
<ul class="dropdown">
<li>Some Li's here</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li><i class="fa fa-database"></i> ONE</li>
<li><i class="fa fa-list-ol"></i> TWO</li>
<li><i class="fa fa-users"></i> THREE</li>
</ul>
</section>
</nav>
<!-- Left Nav Sidebar -->
<div class="icon-bar vertical five-up">
<a class="item">
<i class="fa fa-home"></i>
<label>Home</label>
</a>
<a class="item">
<i class="fa fa-gamepad"></i>
<label>ONE</label>
</a>
<a class="item">
<i class="fa fa-star"></i>
<label>TWO</label>
</a>
<a class="item">
<i class="fa fa-thumbs-up"></i>
<label>THREE</label>
</a>
<a class="item">
<i class="fa fa-trophy"></i>
<label>FOUR</label>
</a>
</div>
I want to achieve:
Top Bar and Icon Bar the same
Content Area to be fixed and have large-8 or large-9
Sidebar to be fixed and have large-3
What I've already tried:
Was separating all 3 bits with div.large-1/8/3, nothing happened
Was nesting them into div.row
I think I've tried almost everything, but have no idea, what is the problem.
i had done the changes in html and css. this what your expecting
html code
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>LOGO PLACEHOLDER</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><i class="fa fa-diamond"></i> Go PRO</li>
<li class="has-dropdown">
<i class="fa fa-user"></i> My Account
<ul class="dropdown">
<li>Some Li's here</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li><i class="fa fa-database"></i> ONE</li>
<li><i class="fa fa-list-ol"></i> TWO</li>
<li><i class="fa fa-users"></i> THREE</li>
</ul>
</section>
</nav>
<!-- Left Nav Sidebar -->
<div class="medium-1 columns left-nav">
<div class="icon-bar vertical five-up">
<a class="item">
<i class="fa fa-home"></i>
<label>Home</label>
</a>
<a class="item">
<i class="fa fa-gamepad"></i>
<label>ONE</label>
</a>
<a class="item">
<i class="fa fa-star"></i>
<label>TWO</label>
</a>
<a class="item">
<i class="fa fa-thumbs-up"></i>
<label>THREE</label>
</a>
<a class="item">
<i class="fa fa-trophy"></i>
<label>FOUR</label>
</a>
</div>
</div>
<div class="medium-8 columns content-area">content-area</div>
<div class="medium-3 columns sidebar">columns sidebar</div>
css code
.columns.content-area{border:1px solid #111;padding:0}
.columns.sidebar{border:1px solid #111;padding:0}
.columns.left-nav{padding:0}
.icon-bar.vertical.five-up{width:100%}
demo jsFiddle