I am attempting to adjust the CSS code so that it does not shrink when clicked on. How can I prevent this from happening?

Here is the element I am attempting to modify. I attempted 

&:active {
flex:7;}

but upon releasing the left click button, it reverted back to its original size.

I was aiming for something similar to this

    <h1>Gallery</h1>

      <div class="gallery-wrap">
      <div class="item item-1"></div>
      <div class="item item-2"></div>
      <div class="item item-3"></div>
      <div class="item item-4"></div>
      <div class="item item-5"></div>
   </div>

Link to the desired effect

However, achieving this would involve using javascript which I am not proficient in.

htmlcssanimation

Answer №1

To change the toggle a .active class on your .item, you can make use of jQuery.

jQuery('.item').click(function(){
   //check if clicked in an opened item | this closes an opened item
   if(jQuery(this).hasClass('active')){
     jQuery(this).removeClass('active'); return;
   }
   jQuery('.item').each(function(){ //remove .active from all 
    jQuery(this).removeClass('active');
   })
   jQuery(this).toggleClass('active'); //toggle .active from current
});
.panel {
   height: 100vh;
}
.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 70vh;
}
.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.3s ease;
}
.item.active {
  flex: 7;
}

.panel.red {
  background-color: red;
}

.panel.green {
  background-color: green;
}

.panel.blue {
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Gallery</h1>

      <div class="gallery-wrap">
      <div class="item item-1 panel red"></div>
      <div class="item item-2 panel blue"></div>
      <div class="item item-3 panel green"></div>
      <div class="item item-4 panel red"></div>
      <div class="item item-5 panel blue"></div>
   </div>

Answer №2

Experiment with utilizing the focus feature

#item:focus {
   width: 200px;
}

Feel free to explore more about focus at this link

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

I could use some input on the best way to make a background video fill the screen while incorporating overlay text

Struggling to make the background video fit perfectly on all devices and browsers? While it looks great in Chrome now, I'm still facing some clipping issues with IE Edge. Any experts out there who can offer their validation or suggest improvements? I ...

htmlcss

Is it feasible to set a default value in an HTML input field that is not editable using JavaScript?

Is there a way to set a default value in an input field of HTML that is not editable, and then allow users to add additional text to it? For example, having 'AB' as the default and uneditable starting characters, followed by any numbers such as A ...

javascripthtml

What's the best method for efficiently hiding/showing a large number of DOM elements?

Imagine you have a maximum of 100 elements that remain consistent in type and format, but their content changes. These elements are connected to an input field and will update as the user types. What would be the most efficient approach for maximizing per ...

javascriptjqueryhtmldom

Creating a full-screen background image in React and updating it with a button

This issue has been consuming a lot of my time, and though I know the answer must be out there somewhere. My problem is quite similar to what's being discussed here. Essentially, I am trying to dynamically change the background image on button click b ...

htmlcssreactjsmaterial-ui

HTML: Organize a slightly intricate column in a table

I am facing an issue with sorting columns in an HTML table that has 2 headers row: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <table ...

javascripthtmlhtml-table

validation of dialog forms

Is there a way to trigger the $("#form").validated() function from the ok button in a jquery-ui-dialog? Please note that I would prefer not to use a submit button within the form. ...

javascripthtmlajaxjquery-ui-dialog

What is the reason behind the fact that the "transform" property of document.getElementById().style.transform="translateX()" only translates the element once?

I'm currently in the process of developing a new online game. With just a simple click of a button, my goal is to have the red square move horizontally by 50 pixels. Here's a snippet of the HTML code: <!DOCTYPE html> <html> <hea ...

javascripthtmlcss

The favicon appears broken upon opening a new tab

Usually, I use a favicon PNG file for my website. It works perfectly and I can see my favicon on the browser tab. However, when I open a PDF document in a new page from my Angular app, I notice that there is a broken icon on the browser tab. Here is how I ...

javascripthtmlcssangularfavicon

What are the best scenarios for utilizing the Bootstrap class “.embed-responsive-item”?

I'm hoping for some help understanding the purpose of the ".embed-responsive-item" class in the code snippet below (Bootstrap code for responsive iframes, videos, etc.). It seems redundant to apply this class to the iframe element when it works just f ...

csstwitter-bootstrapiframetwitter-bootstrap-3

Extracting text from an HTML file and passing it to an Express.js server: A beginner

Currently, I'm attempting to retrieve the values from an HTML text field and store them in variables. I require HTML to capture these values and return the response within the .html file. HTML: <body> <form> ...

javascripthtmlnode.jsexpress

Display the importance of utilizing Bootstrap 4's range input feature

Is there a way to display the value of a range input in Bootstrap without using Javascript? I found this tutorial but it doesn't show how to do it: https://getbootstrap.com/docs/4.1/components/forms/#range-inputs <div class="container"> < ...

htmlcssbootstrap-4range

Troubleshooting error in WordPress: Changing innerHTML of dynamically created divs using JavaScript. Issue: 'Unable to set property innerHTMl of null'

I am struggling to modify the innerHTML of a "View cart" button using a dynamically generated div class on my Wordpress/Woocommerce site. In a previous inquiry, I was informed (thanks to Mike :) ) that since JavaScript is an onload event, the class changes ...

javascriptphpjqueryhtmlwordpress

The row count feature is ineffective in Materialize CSS when adjusting the text area

Can the row count of a text area in materialize css be initialized with a specific number using "rows='20'"? How can we adjust the default row count? Here is an example of code that attempts to set the row count but doesn't work: <div c ...

htmlcssmaterialize

Interactive pop-up window featuring conversational chat boxes

Trying to create a comment box within a Modal dialog box that is half of the width. The comments in this box should be read-only and created using div tags. Attempted reducing the width and using col-xs-6, but ending up with columns spanning the entire w ...

javascripthtmlcssfrontend

Lose the scrollbar but still let me scroll using the mouse wheel or my finger on the fullscreen menu

I am currently working on a fullscreen menu design. However, when the menu appears, some elements are not visible unless I apply the overflow-y: scroll property to the menu. But I don't like the appearance of the additional scrollbar that comes with i ...

htmlcss

JQuery is having trouble with playing multiple sound files or causing delays with events

I've been working on a project that involves playing sounds for each letter in a list of text. However, I'm encountering an issue where only the last sound file is played instead of looping through every element. I've attempted to delay the ...

javascriptjqueryhtmlaudiosettimeout

Ways to optimize view caching to prevent unnecessary file reads and rendering

My current code includes multiple view render calls: router.get('/mcn', (req, res) => { res.render('product/mcn', { layout: 'product/layout', contactKey: 'mcn' }); }); router.get('/agency', (req, res ...

htmlnode.jsexpresspugserver-rendering

Is it possible to retrieve JSON data and display only the entries with positive values in an HTML

I am working on a project that involves fetching JSON API data and displaying it in an HTML table, but only for values above 10. Below is the code snippet along with my JavaScript. I specifically want to exclude negative values and only display positive v ...

javascripthtmljsonfetch-api

The JS content failed to load into the HTML page

I need help creating a workout tracker using two JS files. The main.js file is responsible for loading content from the second file (workoutTracker.js) into the index.html. However, I'm facing an issue where the content is not being displayed on the p ...

javascripthtmlcssperformancetracker