List organized in two columns utilizing the data-* attribute

Is it possible to display a list in a two-column format based on a data attribute of each item?

<ul>
    <li data-list="general_results">general text1</li>
    <li data-list="general_results">general text2</li>
    <li data-list="general_results">general text3</li>
    <li data-list="category_results">category text1</li>
    <li data-list="category_results">category text2</li>
    <li data-list="category_results">category text3</li>
    <li data-list="category_results">category text4</li>
</ul>

The desired output should look like this:

general text1               category text1
general text2               category text2
general text3               category text3
                            category text4

It can be assumed that the items listed will always be grouped accordingly.

Efforts to achieve this layout using floating elements have resulted in a left-to-right rather than vertical arrangement. Any suggestions for achieving the desired output?

htmlcss

Answer №1

To easily achieve a two-column layout with space between columns, simply insert a blank line and use the column-count property.

div#twoColumn {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
    line-height:1.5em;
    list-style-type:none;
}
<div id="twoColumn">
    <ul>
    <li data-list="general_results">general text1</li>
    <li data-list="general_results">general text2</li>
    <li data-list="general_results">general text3</li>
     <li data-list="general_results">&nbsp;</li>
    <li data-list="category_results">category text1</li>
    <li data-list="category_results">category text2</li>
    <li data-list="category_results">category text3</li>
    <li data-list="category_results">category text4</li>
</ul>
</div>

Answer №2

So, this is what transpired...

I delved into the HTML CODE and extracted the value of the data-list attribute, then proceeded to sift through it before appending it onto distinct divs.

<ul>
<li data-list="general_results">general text1</li>
<li data-list="general_results">general text2</li>
<li data-list="general_results">general text3</li>
<li data-list="category_results">category text1</li>
<li data-list="category_results">category text2</li>
<li data-list="category_results">category text3</li>
<li data-list="category_results">category text4</li>
</ul>

<div id="gen_text_here">
</div>
<br />
<div id="cat_text_here">
</div>

For the JQUERY PART:

$('ul li').each(function(){

  if($(this).attr("data-list") == 'general_results'){
     $('#gen_text_here').append($(this).attr("data-list") + '<br />');
  }else if($(this).attr("data-list") == 'category_results'){
     $('#gen_text_here').append($(this).attr("data-list")  + '<br />');
  }

});

Answer №3

This solution may not be the most elegant, but it gets the job done:

[data-list="general_results"] {
    float:right;
    clear:right;
}

Check out the demonstration here: http://jsfiddle.net/qUAT6/1113/

I personally don't recommend this approach. It's better to separate your elements into two lists for a more effective solution.

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

CSS: The Ultimate Guide to Concealing the Second Row in a Table

I have a single table in my code: <table> <tr><td>sample data 1</td></tr> <tr><td>sample data 2</td></tr> <tr><td>sample data 3</td></tr> <tr><td>sample data 4</t ...

htmlcss

Ways to transfer data to a different PHP file without the need to navigate to the actual page

How can I make a button send information to another PHP folder while staying on the same page? <button class="btn btn-outline-dark w-60"><?php echo "<td> <a href='carrinho.php?acao=adc&id=$PegaID'>Adicionar ...

phphtmlmysql

Creating a Parent Container to Maintain the Height of the Tallest Offspring

I've been searching online for solutions, but so far I haven't found one that meets all the requirements. <div class="parent"> <div class="child1">I am 60px tall and always visible; my parent is 100px tall</div> <div ...

javascriptjquerycss

Blurry text and icons in Bootstrap 3

Does anyone else notice a strange display issue with Bootstrap 3 fonts and glyphicons? It seems like the bitmaps and fonts are appearing blurry on desktops when using Firefox and Chrome, but everything looks fine on mobile devices. I've attached an ex ...

javascripthtmltwitter-bootstrap

Tips for creating multiple full-screen overlays in HTML

I am new to the world of web development and I am currently working on implementing a set of buttons that will trigger specific overlays when clicked. I found the following code snippet on W3schools which creates a button along with an overlay effect. < ...

javascripthtmlcss

What is the best way to decrease the font size of every element in the DOM?

Is there a way to decrease the size of all DOM elements by a specific amount? Currently, I am using Bootstrap styles where h5 is set at 14px and I need it to be 12px, and h1 is at 36px when I want it to be 34px, and so forth. I have considered two option ...

csstwitter-bootstrapcross-browser

Height of the image is being boosted while the width remains consistent

When working on a responsive page layout, I encountered an issue with increasing the height of an image while keeping the width constant. Modifying the width of the image reflects changes, but adjusting the height does not seem to make any difference. I t ...

htmlcss

In order to show the responses underneath, we must first identify the parent comment

Currently, I have two different forms for comments - one is the "parent" comment form and the other is a response form. I am looking for ways to: Capture which response corresponds to which parent comment in the script Maintain the hierarchy of response ...

phphtmlsql

What are the guidelines for incorporating tag names in CSS selectors?

I created a button that when clicked, displays a table containing actors. I have named them as follows: <button class="actors">Show actors</button> <table class="actors">...</div> Next, I want to style and access them in my CSS (a ...

htmlcsscss-selectors

Guide for verifying the minimum and maximum values when selecting a particular product from a dropdown menu

My goal is to implement validation for the width textbox when a user selects a specific product from the dropdown menu. The validation should only allow the user to enter a value between 10 and 200. I have successfully retrieved the selected value, but I ...

javascriptjqueryhtml

Using the last child as a parent element in Selenium with JavaScript

I am trying to access the input element of the last child in this code snippet. Specifically, I want to retrieve the text Text Reply - Delete. <div class="priority-intent-div"> <div class="row add-priority-intent-div"> ...

javacssseleniumselenium-webdrivercss-selectors

jQuery 'if' condition not getting detected

My jQuery code is not recognizing an if statement. You can check out the CodePen link here. On my site, I have 4 page transitions - page right, page left, page up, and page down. The contact page is hidden beneath the main hero sections and appears with t ...

jqueryhtmlcsstransition

`The Bootstrap Navigation Bar is not functioning properly on the published website.`

My Bootstrap Offcanvas Example navigation bar functions perfectly in my local environment. However, when I upload my build to a live website, the navigation links result in a 404 Error, indicating that the page does not exist. Interestingly, the footer at ...

htmlcssreactjstwitter-bootstrapbootstrap-5

The datepicker in Jquery is hidden beneath a div

I've been using this datepicker in my code for a while now. Recently, I made some changes to the HTML and added AJAX calls. However, when I click on the input field, the datepicker doesn't show up. It seems like it's been added to the DOM co ...

jquerycssdatepicker

Transition CSS applied only to links containing images

I am trying to figure out how to apply a transition effect only on links that have images, rather than text. Specifically, I want the transition effect to be applied only to the second link in the following example: <a href="#">no image</a> &l ...

csshyperlinkcss-transitions

Add a CSS class to an innerHTML element just a single time

I currently have 2 files available: data.php page.php The data.php file is responsible for fetching a row from a SQL database and sending it to the page.php file. Within the page.php file, there is a JavaScript script that receives this row through AJAX ...

javascriptphphtmlcssajax

Steps for aligning a grid column to the same height as the element above it and moving it to the left side

I have a setup using material UI where I have a grid positioned on top of a Paper element. Within the grid, there is a text input field in the first column that I want to match the height of the paper element and be aligned with its left border. I have tri ...

cssreactjsmaterial-ui

Using JavaScript and jQuery to create a delay when handling input events

I am working on a project where I have an HTML table that retrieves its values from a database using jQuery Ajax. Here is an example: <div id="tableId"></div> Below is the JavaScript code: function showUser(rowsToShow) { request = $.get("s ...

javascriptjqueryhtmlajax

The program is designed to only allow up to two images to be wrapped

I'm struggling with a short jQuery program that I need help with. The problem is, I can't seem to get it to wrap more than two images in the same row. My goal is to create a website that side-scrolls, and I thought this approach would be the simp ...

javascriptjquerycsshtml

Issue with setting innerHTML of element in AngularJS app upon ng-click event

Look at this block of HTML: <div class="custom-select"> <div class="custom-select-placeholder"> <span id="placeholder-pages">Display all items</span> </div> <ul class="custom-select- ...

javascripthtmlangularjsinnerhtml