Utilize CSS to make a div larger and eliminate any other divs within the same parent when it is

I am having trouble with the .animate function in jQuery, so I want to resize a div without using it.

My goal is to enlarge boxes using CSS. I have 4 boxes positioned next to each other, and when one of them is clicked, it should expand while the others move off the screen (possibly those on the left go left and those on the right go right). The boxes are contained within a rectangle that should also enlarge along with the boxes.

I believe I can achieve this by creating a new class in CSS (.thumb:click), but I'm unsure how to use Javascript/HTML to execute the enlargement and pushing off-screen effect.

Here is the HTML code:

<div class="portItem">
    <div class="itemContent-wrap">
       <div class="itemContent">
           <div class="container">
               <div class="thumbWrap">
                   <div class="thumb"></div>
                   <div class="thumb"></div>
                   <div class="thumb"></div>
                   <div class="thumb"></div>
               </div>
           </div>
       </div>
   </div> 
</div>

CSS styles:

.itemContent-wrap {
  display: inline-block;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.itemContent {
  height: 250px;
  width: auto;
  position: static;
  display: block;
  background: #ffffff;
  box-shadow: 1px 0px 20px black;
  margin-bottom: 10px;
  margin-left:-12.5%;
  margin-right:-12.5%;
  overflow-y: hidden;
}

.container {
    width: 110%;
    margin: 0 auto;
    background: transparent; 
    position: relative;
}

.thumbWrap {
  height: 220px;
  white-space: nowrap;
  width: 2000px;
}

.thumb {
  height: 200px;
  width: 450px;
  position: relative;
  display: inline-block;
  background: #D0E182;
  margin-top: 25px;
  margin-right: 5px;
}

// Proposed solution...
.thumb:click {

}

Javascript code (trying to avoid using .animate)

$(document).ready(function(){
   $('.thumb').click(function()
   {
      $('.itemContent').css("cursor","pointer");
      $('.itemContent').animate({height: "500px"}, 'slow');
      $(this).animate({width: "900px",height:"400px"}, 'slow');
   });

$('.thumb').mouseout(function()
  {   
      $('.itemContent').animate({height: "250px"}, 'slow');
      $(this).animate({width: "450px",height:"200px"}, 'slow');
   });
});

Link to JSFiddle for reference: http://jsfiddle.net/g4GFb/

Thank you in advance for your assistance!

Answer №1

There is no default CSS property for handling click behavior, so using JS/HTML is the correct approach. I recommend checking out this tutorial on jQuery for sliding elements left/right:

In addition, consider adding an .active class to streamline your code and create a global function for all divs.

I hope this information proves helpful!

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

Turn off the ability to cache an HTML file without using PHP

I am currently faced with the challenge of managing a rather outdated, small website stored on a web space that does not support PHP. To overcome this limitation, I have decided to use iframes to avoid having to manually implement the basic structure and m ...

With the help of JQuery, toggling the display property from block to none ensures it won't switch back to block unexpectedly

Below is a snippet of my html code: <div class="color_area"> <div class="blue" data-color="blue"></div> <div class="green" data-color="green"></div> <div class="red" data-color="red"></div> </div> < ...

"Can you provide instructions on how to set the background to the selected button

How can I change the background color of a selected button in this menu? Here is the code for the menu: <ul id="menu"> <li class="current_page_item"><a class="button" id="showdiv1"><span>Homepage</span></a></ ...

At what precise moment does React apply the CSS to a component?

In my app.js file, I import someComponent.js. This someComponent.js file then imports someStyles.css. However, app.js will only use or render someComponent.js when a button is clicked. So, the question arises: When will the user's browser load and ap ...

Utilizing Kendo for Dynamic HTML Element Connection

Currently, I am facing a situation where I have three HTML elements. The first is a textbox labeled shipToAddress, the second is another textbox called deliverToAddress, and finally, there is a checkbox named sameAsShipToAddress. In the background, there ...

Off-center rotation of an element - seeking solution [closed

This question has been closed. It requires additional details for debugging. Answer submissions are currently not accepted. ...

The foundation CLI encountered an error due to primordials not being defined in the CSS

While running sudo npm install --global foundation-cli, I encountered an issue while trying to create a Foundation Zurb project. Here is the error message I received: https://i.sstatic.net/UWSIm.png ...

Displaying form fields based on conditions in CodeIgniter using PHP

One of the elements in my form is a select input for manufacturers. <div class="form-group"> <label for="manufacturer">Manufacturer</label> <select id="manufacturerSelect" name="manufacturer" class="form-control"> ...

Exploring the world with HTML5 Geolocation on Google Maps

I've recently been studying a tutorial on HTML5 geolocation and I'm looking to make some modifications to the code. Specifically, I want to add a text input for the destination address instead of having a fixed destination. Any suggestions or met ...

Angular list with a repeating group of radio buttons

I have a set of 'options', which consists of the following: {Id: 1, Label: "option 1"}, {Id: 2, Label: "option 2"} Additionally, I have a list of 'products' structured as follows: {Id: 1, Name: "Name 1", Recommend: options[0]}, {Id: ...

Modify the content of the input field using Bootstrap

I'm looking to prefill an input/textbox in Bootstrap with a specific string as the default value. This isn't about using the placeholder attribute, but actually changing the text that appears in the input so users can select and edit it. For exa ...

JavaScript call embedded in a browser bookmark

Is it possible to include a JavaScript call within an HTML bookmark like this: <a href="bookmark">Go down</a> . . . <a name="down" href="javascript:alert('movedhere')"> When a visitor clicks on "Go down," the alert message app ...

Achieve a full vertical span of the Bootstrap 5 grid row to encompass all of its content

How can I ensure that a Bootstrap 5 grid row expands to fit its entire content vertically? Adding a label element causes the content of the first row to overlap with the second row in the example provided below. <!doctype html> <html lang="en ...

Tips for fading an image as you scroll using CSS and JavaScript?

I have been dedicating my day to mastering the art of website development. However, I am facing a challenge that is proving to be quite difficult. I am looking to create a smooth transition effect where an image gradually blurs while scrolling down, and re ...

Unable to align image using iframe in middle position

I am currently facing an issue with aligning a dynamically populated form within an iframe to the center of the webpage. Despite trying to use padding-left:13% to center the form, I encountered a problem with the form displaying a scroll bar and empty spac ...

I continually run into the error message "Uncaught ReferenceError: dropMenu is not defined" and "Uncaught TypeError: Cannot read property 'style' of null."

I'm attempting to create a navigation bar with submenus, but I keep encountering errors such as "dropMenu is not defined" and "Uncaught TypeError: Cannot read property 'style' of null" when hovering over the Paris links. Any thoughts on what ...

SASS: incorporating loops within CSS properties

Is there a way to generate multiple values for a single property in CSS? background-image: radial-gradient(circle, $primary 10%, transparent 10%), radial-gradient(circle, $primary 10%, transparent 10%), radial-gradient(circle, $primary 10%, tr ...

Tips on eliminating the background of a div nested within another div

<div class="white"> <div class="transparent"> ---- </div> <div class="content"> ---- </div> </div> I am working with a parent div .white that has a white background color. Inside this parent div, there are mul ...

Achieving the minimum width of a table column in Material-UI

Currently I am in the process of developing a React website with Material-UI. One query that has come up is whether it's feasible to adjust the column width of a table to perfectly fit the data, along with some extra padding on both ends? Outlined be ...

The container stays vacant as the bootstrap modal gracefully appears with a fading effect

I am trying to implement a basic bootstrap modal into my project, but I am encountering some issues with the code. When I click the "Launch demo" button, the modal fades in as expected, yet the container supposed to contain the ".modal-header", ".modal-bo ...