Tips for concealing images within a designated list and revealing them in a separate list

I have a question regarding image visibility. Is it possible to hide certain images from a "SHOW ALL" list, but have them appear in a different category list? Below is the code snippet:

<section>
    <ul class="portfolio_filters">
        <li><a href="#" data-filter="*">show all</a></li>
        <li><a href="#" data-filter=".new">New Logos</a></li>           
        <li><a href="#" data-filter=".black ">Black & White</a></li>    
        <li><a href="#" data-filter=".industrial">Industrial</a></li>    
        <li><a href="#" data-filter=".mix">Mix</a></li>          
    </ul>
</section>

I am looking to exclude certain images from the "SHOW ALL" list but have them only visible in the "New Logos" list, for example. Below is a sample code for a linked image:

<div class="new col-sm-4 col-md-4">
                              <div class="portfolio_item"> <a href="images/portfolio/stimson.jpg" class="lightbox"> <img src="images/portfolio/stimson.jpg" alt="Wedding photograph">
                                   <div class="overlay">
                                        <div class="desc">
                                             <h4>Stimson</h4>
                                             <span class="cross"></span> </div>
                                   </div>
                                   </a> </div>
                                    </div>

How can I ensure this image is only visible in the "New Logos" list and not in the "SHOW ALL" list?

javascripthtmlcss

Answer №1

If you want to achieve a similar effect, you can use the following code:

$("img").hide();

$("li a").click(function(event){
    event.preventDefault();
    $("img").hide();
    filter = $(this).data("filter");
    if(filter=="*")
        $("img:not(.black)").show();
    else
        $(filter).show();
});

Check out this JsFiddle demo

Answer №2

To conceal certain images, designate a class such as .hidefromall and employ a :not() selector:

<li><a href="#" data-filter=":not(.hidefromall)">display all</a></li>

Answer №3

It can be challenging to troubleshoot without seeing all of the code. Assuming that all the lists have a similar structure, the easiest solution would be to assign a class to the specific list where you want to hide the 'Show all'. Let's call this class dontShowAll. You can then use the following CSS:

.portfolio_filters.dontShowAll li:first-child { /* make sure there is no space between the classes when writing the selector */
    display: none;
}

If you are unable to modify the HTML structure, you can utilize child selectors:

section:first-child ul li:first-child { /* only affects the first list */
section:nth-child(odd) ul li:first-child { /* targets all odd lists */
section:nth-child(3n) ul li:first-child { /* targets every third list */
section:nth-child(4) ul li:first-child { /* only affects the fourth list */
section:nth-child(n + 5) ul li:first-child { /* targets the fifth list and subsequent lists */

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to click a button on HTML file

In my current project, there is a piece of code responsible for checking if the user is logged in or not. If the user hasn't logged in yet, they are redirected to the login page. Once the user logs in successfully, they should be able to upload conten ...

javascriptphpfile-iofetch-api

Tips for invoking a function from a JavaScript file within an Angular component

This particular query remains unanswered and pertains to AngularJS. I am seeking a solution specifically for Angular, as none of the existing answers online seem to be effective in my case. Here is an outline of my code: Columns.js export class Columns { ...

javascriptangular

Align the radio button in the center of the input field

I have created custom radio buttons, and the last option includes a radio button with an input field. However, in the Codepen example provided, the alignment of the radio button and input field is not centered vertically. I've attempted various soluti ...

htmlcsstwitter-bootstrapbootstrap-4

Using JavaScript to determine the time it will take to download something

Hi everyone, I'm a beginner in javascript and I am currently working on finding the download time of a file. I have calculated the size of the file and divided it by the current time, but unfortunately, I am not getting the correct result. This is th ...

javascriptajax

Attempting to conceal a div element along with its contents using AngularJS

I am attempting to use AngularJS to hide a div and its contents. I have defined a scope variable initialized as false and passed it to the div in order to hide it. However, the div is still visible along with its content. <script type="text/javascr ...

javascripthtmlangularjs

Enable the submission of the form with a combo of Shift key and Enter

When using a simple form that posts to a basic PHP script, I encountered an issue where if someone is typing quickly and accidentally holds down the Shift key while pressing "Enter," a barrage of PHP error messages appears. Is there a way to allow Shift + ...

phpjavascriptforms

"Swapping out a parent view with a child route component in Vue: Step-by-step

I have created Vue routes with a parent route for 'dashboard' and a child route for 'report', set up like this: { path: '/dashboard', component: dashboard, children: [ { path:'report', com ...

javascriptvue.jsvue-componentvue-router

An error was discovered: [$injector:unpr] The provider aProvider is not recognized <- a

While working on my development machine, I encountered no issues. However, upon loading the same form onto my production server, I encountered an error: Uncaught Error: [$injector:unpr] Unknown provider: aProvider <- a I found that removing the followi ...

javascriptjqueryangularjs

retrieving information from a data attribute

When setting a data attribute for a user on a link, the code looks like this: <input type="button" class="btn" data-user={"user": "<%= @user.name %>"} value="Start" id="game"> Upon listening for the click event in the JavaScript function, co ...

javascriptjquery

Creating a class that can be easily mocked for connecting to mongoDB

I've been attempting to develop a class that connects to MongoDB (and accesses a gridFS connection using gridfs-stream). However, I have encountered two specific problems: Sometimes, I receive the mongo Error server instance in invalid state connect ...

javascriptnode.jsunit-testingjestjs

Separate the label and content sections in an Angular Material vertical stepper

https://i.sstatic.net/S1gIH.jpg After applying the following CSS: mat-step-header{ display: flex ; justify-content: flex-end ; } I am attempting to make this stepper function properly. I have implemented Angular Material design for a vertical stepp ...

cssangularangular-material

Choose a division of an element within an embedded frame

Two different pages on the same website, Home.html and Page2.html. Home.html contains the following code: <html> <iframe id="one" src="page2.html" style="display:none"></iframe> <div id="container"> <h1& ...

javascriptjqueryhtmliframeinnerhtml

Struggling to find multiline content in a SWIFT message using regex

Looking into a SWIFT message using RegEx, here is an excerpt: :16R:FIN :35B:ISIN CH0117044708 ANTEILE -DT USD- SWISSCANTO (CH) INDEX EQUITY FUND USA :16R:FIA The goal is to extract information in group 3: ISIN CH0117044708 ANTEILE -DT USD- SWISSCANTO (C ...

javascriptregexmultiline

Customize the drawer background in Vue Material

Recently, I developed a vuejs application incorporating Google's material design components. I've been exploring options to customize the background color. <template> <div class="page-container"> <md-app> ...

cssvue.jssassvue-material

Unleashing the Power of the "OR" Operator in Form Field Validation

The custom JavaScript function FormQuote_Validator is used to validate form fields. It should return the value "TRUE" and display an alert message if all three input fields are submitted without any numbers; otherwise, it should return the value "FALSE". ...

javascripthtmlforms

What is the proper way to declare a JavaScript variable using a hyphen symbol?

When it comes to evaluating a string like employee-count = 3, my main issue arises when dealing with variables that may not have a standard naming convention. While valid variable names pose no challenge, identifiers such as employee-count leave me slightl ...

javascriptvariables

What is the correct method for configuring access permissions?

I'm in the process of developing a user management system, but I keep finding myself having to check the user type for each router. router.get('/admin/settings', (req, res) => { if(admin) { //Proceed. } } router.get(&apo ...

javascriptnode.jsexpress

Adaptable data table featuring varying sizes of columns and rows

I'm attempting to design a grid that resembles the following: https://i.sstatic.net/Sf7M9.png The challenge I'm facing is how to ensure that the column and row names adjust properly with the grid in the center. Currently, this is the code I hav ...

htmlcssresponsiveness

I'm having trouble changing the background color on my HTML Bootstrap website. Is there a way to easily add social network buttons as well?

I'm encountering a problem here. One of my friends assisted me with Bootstrap elements for my website, but after switching my site to Bootstrap, I am unable to change the background color on my website. Can someone lend a hand? Much appreciated! Also, ...

csshtmltwitter-bootstrap

Is there an official IRC channel for YUI?

Although the yui3 documentation is quite helpful, it can also be beneficial to ask unconventional questions in order to discover the best practices. Are there any gatherings or meetups for all the talented yui developers out there? ...

javascriptuser-interfaceyuiyui3