When clicking, expand the li element to 100% width and move the other siblings aside

I'm looking to arrange li elements in multiple columns with flexibility.

https://i.sstatic.net/HJCZu.png

<ul>
    <li class="yellow">
        Yellow Block
    </li>
    <li class="red">
        Red Block
    </li>
    <li class="green">
        Green Block
    </li>
</ul>

Upon clicking one of the columns, I want that li element to expand to 100% width while pushing its siblings out of view.

$('li').on("click", function(){
    $(this).addClass("active");
    $(this).siblings().addClass("nonActive");
})

The animation could involve movement, hiding, or width changes for a clean effect.

What I've experimented:

Setting clicked item to 100%, siblings to 0%:

https://jsfiddle.net/bo28dy10/

.active{
    width: 100%;
}
.nonActive{
    width 0%;
}

Issue: Causes word wrap as it shrinks, unable to set no-wrap due to intended label wrapping at full width.

Setting clicked item to 100%, parent wrapper overflow hidden: https://jsfiddle.net/gqqeq4wu/

.active{
    width: 100%;
}
ul{
    overflow: hidden;
}

Issue: Siblings pushed down instead of out, fixed height on the parent not possible.

Setting clicked item to 100%, setting siblings display:none: https://jsfiddle.net/xf0om99t/

.active{
    width: 100%;
}
.nonActive{
    display:none;
}

Issue: Smooth transition not achievable with display:none.

Any recommended approach to achieve this visual effect?

(bonus: Seeking automatic expansion of columns without fixed widths using flexbox maybe?)

Answer №1

You were on the verge of success

overflow:hidden;
white-space:nowrap;

This simple solution does wonders for a smooth experience

Take a look at this demonstration

https://jsfiddle.net/bo28dy10/2/

Answer №2

What if we experiment with using margin-right and opacity in the following way?

$('li').on("click", function(){
$(this).addClass("active");
  $(this).siblings().addClass("nonActive");
})
ul{
  width: 400px;
  list-style-type: none; 
}
li{
  width: 33.33%;
  float: left;
  padding: 15px 0px;
  text-align: center;
  transition: 0.6s all;
}
.red{
  background: red;
}
.yellow{
  background: yellow;
}
.green{
  background: green;
}
.active{
  width: 100%;
}
.nonActive{
  margin-right:-400px;
  opacity:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="yellow">
Yellow Block
</li>
<li class="red">
Red Block
</li>
<li class="green">
Green Block
</li>
</ul>

Answer №3

I utilized jQuery to establish the minimum width for each li element. Additionally, I incorporated a div to demonstrate that it functions efficiently with varying numbers of li elements.

liLen = $( "ul" ).width()/$( "li" ).length
$("li").children('div').css("min-width", liLen+"px");

https://jsfiddle.net/bo28dy10/4/

Answer №4

If you want to adjust the appearance of the siblings, consider modifying the width, padding, and font size:

$('li').on("click", function(){
$(this).addClass("active");
  $(this).siblings().addClass("nonActive");
})
ul{
  width: 400px;
  list-style-type: none; 
}
li{
  width: 33.33%;
  float: left;
  padding: 15px 0px;
  text-align: center;
  transition: 0.6s all;
}
.red{
  background: red;
}
.yellow{
  background: yellow;
}
.green{
  background: green;
}
.active{
  width: 100%;
}
.nonActive{
  padding: 23px 0px;
  width:0;
  font-size:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="yellow">
Yellow Block
</li>
<li class="red">
Red Block
</li>
<li class="green">
Green Block
</li>
</ul>

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

Fade effect not working with Bootstrap Modal

I am encountering an issue with the Twitter Bootstrap modal while trying to display post details on WordPress. The problem is that when the modal opens, the entire screen turns grey and nothing in the modal is clickable. I can only exit this mode by pressi ...

How can I incorporate classes from multiple CSS files into my WordPress theme?

Currently, I am utilizing wp_enqueue_style to incorporate two CSS files within a single function. However, the issue that arises is when I try to apply a class, it seems that only classes from one of the files can be utilized and it ends up overriding anot ...

Tips for converting JSON object values to a string using JavaScript

Consider the following JSON object: { "id": 1, "name": "Name", "surname": "Surname", "number": "111111111" } Is there a way to transform this JSON object into a string that formats it as follows using JavaScript? Name Surname 111111111 ...

Trigger a JavaScript/jQuery alert if the text input field contains a specific string

I am currently facing an issue with a text field (id=#CAT_Custom_244677) that gets populated by a JavaScript date picker. My goal is to display an alert message if the user selects a date that includes '2013' in the text field value. However, I h ...

Using JavaScript to parse JSON response for sending status data through a POST request

I have successfully implemented a PHP code for file uploads. However, I am facing an issue retrieving the JSON response that indicates the upload status. Upon uploading a file via POST method, the response appears as follows: {"html_content":"<p>Fi ...

Displaying the blog post title in the metadata information

Currently, I am facing a challenge with my Jekyll site's Search Engine Optimization because I am having difficulty setting meta information. ... <meta name="og:title" content="{{ seo_title }}" /> ... <!-- now in my for post-loop: --> {% f ...

Reading and storing HTML source code in Python line by line

Recently, I embarked on the journey of learning Python 3. As I delved into my Python book, I found myself pondering some questions... One of my challenges is to extract key words from HTML source code. I managed to write code that allows me to open a URL ...

The Kendo grid and Jquery functionalities seem to be malfunctioning on my View page

Looking to incorporate a progress bar using Jquery UI on my view page. The layout also includes a Kendo Grid component. I included the necessary files (jquery-ui.css, jquery-.js, jquery-ui.js) but encountered an error when adding jquery.js. The error mess ...

Top pick for building drag-and-drop web applications: the ultimate JavaScript library

Up to this point, I've relied on jQuery UI's draggables and droppables for my projects. However, I recently came across ExtJS and other libraries that caught my interest. I am aiming to create a professional-grade plugin. Can anyone suggest the b ...

Using JavaFX to showcase FontAwesome icons

I've been working on a project to create a custom icon class that can load FontAwesome icons, but I'm facing issues with reading the fontawesome-webfont.ttf file. Here is the code for creating an icon: import javafx.scene.control.Label; import ...

What is the best way to calculate the total of all the prices listed in the span class="total"?

On my webpage, I have two sections - one for processors and the other for RAM. To retrieve prices from the database through AJAX, how can I total up all the prices listed within the span elements with the "total" class? <td> <span class="m ...

Retrieving Array keys from PHP using jQuery

As a beginner in jQuery, I am eager to learn how to retrieve Array keys from a php file using jQuery. Currently, I have jQuery code set up to send input to file.php and execute a query on every keyup event. When file.php echoes the result, it looks somet ...

The built-in functions of Wordpress are not able to be identified in the ajax PHP file

As a newcomer to Wordpress development, I am facing challenges with implementing ajax on my WordPress site. I am currently working on a plugin that requires the use of ajax. However, my php file (xxxecommerce.ajax.php) is not recognizing the built-in Word ...

Guide on how to swap the <li> elements with a new <ul> using jQuery or JavaScript

My code snippet: <ul> <li id="1"></li> <li id="2"></li> <li id="3"></li> <li id="4"></li> <li id="5"></li> <li id="6"></li> </ul> I would like to ...

Reload the webpage with changing data without the need to refresh the entire browser

Hello, I have been working on a project that requires refreshing data every 10 seconds. I have successfully created a separate file to load one type of information, but I am now faced with the question of how to handle 3 different sensor data in my databas ...

Decoding JavaScript elements embedded in an HTML website

My current HTML site includes the following code: <script type="text/javascript"> jwplayer('player_container').setup( { 'width': '640', ...

Make Bootstrap Panel Full Width with Highcharts Data

I am currently working on displaying graphs using the Highcharts library on three televisions. All televisions have a FULL HD resolution of 1920 x 1080. I have one Bootstrap panel containing a graph in the panel-body. <div class="panel panel-blue"> ...

Creating a Form Layout with Bootstrap - Organizing Text Boxes and Text Areas

https://i.sstatic.net/oqRwR.jpg In the image above, I need to adjust the position of the textbox to align it with the TextArea. Is there a Bootstrap class that can help me achieve this? My current version of Bootstrap is 3.3.6. HTML &l ...

"An Unanticipated SyntaxError occurred due to a misplaced token in the doctype declaration

I find myself revisiting a small import script, which I had to divide due to the large amount of data. Initially, there's a start.php file with an impressive ajax action and dbactions.php that handles all the heavy lifting. The script kickstarts by ...

Font animation experiencing limited functionality

As a beginner in the world of programming, I am facing some challenges with my animation. The struggle lies in the fact that only my "Treats" are moving and not the "Tricks". Any guidance or suggestions would be greatly welcomed as I might have jumped into ...