CODEWITHSUNDEEP
htmlcsslisthide
Henry
Henry

Reputation: 5313

Unable to hide HTML within a UL + LI (CSS)

Can anyone see or think why I can't hide items 5 onwards?

I would like to show ONLY items #1, #2, #3, and #4 with the rest all hidden (i.e. completely hidden from the code).

I can hide them from the client view but view source you can see the HTML - what am I doing wrong here?

I have tried:

visibility: hidden

As well as

display: none

And still, the code is there...

ul>li {
  display: inline-block;
  /* You can also add some margins here to make it look prettier */
  width: 180px;
  zoom: 1;
  *display: inline;
  /* this fix is needed for IE7- */
}

ul>li:nth-of-type(1n+5) {
  display: none;
}

.speakercard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 180px;
  margin: auto;
  text-align: center;
  padding-top: 14px;
}

button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px;
  color: white;
  background-color: #393939;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

a {
  text-decoration: none;
  color: black;
}

button:hover,
a:hover {
  opacity: 0.7;
}

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin-left: auto;
  margin-right: auto;
}

.profile-pic {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}
<ul>
  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>1 Poo Doe</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>2 Doe</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>3 Doe</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>4 Doe</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>THIS SHOULD BE TOTALLY HIDDEN</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>THIS SHOULD BE TOTALLY HIDDEN</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>THIS SHOULD BE TOTALLY HIDDEN</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>
</ul>

Any idea how to make this happen?

Thanks!

Upvotes: 4

Views: 953

Answers (5)

Pallavi
Pallavi

Reputation: 506

I would simply use ngClass directive:

 <ul>
  <li *ngFor="let user of users; let i = index" [ngClass]="{'hide': i>3}">
    <div class="speakercard">
      <div class="image-cropper">
        <img src="{{user.img}}" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>{{user.id}} {{user.name}}</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>
  </ul>

CSS :

.hide{
display:none;
}

You can also replace hide with bootstrap class d-none:

<li *ngFor="let user of users; let i = index" [ngClass]="{'d-none': i>3}">

Upvotes: 0

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17600

Demo to hide from also view source you should use ngIf directive rather than css

or you can use custom pipe to show what you want.

or you can connect to ngFor your elements and filter your list related what you want.

css just applied for design. It does for user view

for ngIf your html

<ul>
  <ng-container *ngFor="let data of personels;let i = index;">
    <li *ngIf="i<4">
      <div class="speakercard">
        <div class="image-cropper">
          <img src="{{data.img}}" class="profile-pic" alt="" style="width:100%">
        </div>
        <p>{{data.id}} {{data.Name}}</p>
        <p><button>Speaker Profile</button></p>
      </div>
    </li>
  </ng-container>
</ul>

in component.ts just create your array

personels=[
    {id:1,Name:"Poo Doe",img:"image1"},
    {id:2,Name:"Poo Doe",img:"image1"},
    {id:3,Name:"Poo Doe",img:"image1"},
    {id:4,Name:"Poo Doe",img:"image1"},
    {id:5,Name:"Poo Doe",img:"image1"},
    {id:6,Name:"Poo Doe",img:"image1"},
    {id:7,Name:"Poo Doe",img:"image1"}
  ]

and this is pipe example

create custom pipe

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'customPipe'
})

export class CustomPipe implements PipeTransform {
  transform(row: any[],n:number): any {
      return row.filter((x,idx)=>idx<n);       
  }
}

and in html use pipe

<ul>
    <li *ngFor="let data of personels|customPipe:4">
      <div class="speakercard">
        <div class="image-cropper">
          <img src="{{data.img}}" class="profile-pic" alt="" style="width:100%">
        </div>
        <p>{{data.id}} {{data.Name}}</p>
        <p><button>Speaker Profile</button></p>
      </div>
    </li>
</ul>

Upvotes: 2

CMJR
CMJR

Reputation: 19

It is my first answer on SO ever and guys above clearly gave you the solution but here is another way to accomplish the same result.

let myobj = document.querySelectorAll("ul > li:nth-of-type(1n+5)");
Array.from(myobj).map((el)=>el.remove())

Upvotes: 0

Sam
Sam

Reputation: 273

What you aim for is not possible with CSS! CSS is build just for styling the content of the DOM, not for malipulating the latter. If you really want to remove the items after the speaker profile 4, then you would have to use JavaScript to do so. JavaScript can manipulate the DOM on the client side. But why are you sending the profiles at all, if you want to remove them afterwards? Wouldn't it be easier to just not send them to your clients?

But if you rellay want to do so, here is how you can achieve your desired result.

let speakercards = document.querySelectorAll('.speakercard');

for (let i = 0; i < speakercards.length; ++i) {
  if (i >= 4) {
    speakercards[i].remove()
  }
}
ul>li {
  display: inline-block;
  /* You can also add some margins here to make it look prettier */
  width: 180px;
  zoom: 1;
  *display: inline;
  /* this fix is needed for IE7- */
}

/* ul>li:nth-of-type(1n+5) {
  display: none;
} */

.speakercard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 180px;
  margin: auto;
  text-align: center;
  padding-top: 14px;
}

button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px;
  color: white;
  background-color: #393939;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

a {
  text-decoration: none;
  color: black;
}

button:hover,
a:hover {
  opacity: 0.7;
}

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin-left: auto;
  margin-right: auto;
}

.profile-pic {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}
<ul>
  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>1 Poo Doe</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>2 Doe</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>3 Doe</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>4 Doe</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>THIS SHOULD BE TOTALLY HIDDEN</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>THIS SHOULD BE TOTALLY HIDDEN</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>THIS SHOULD BE TOTALLY HIDDEN</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>
</ul>

Upvotes: 0

Siful I
Siful I

Reputation: 1932

Try this CSS:

li {
  display: none;
}
li:nth-child(-n+3) {
  display: block;   
}

check on codepen

Upvotes: 1

Related Questions