Display Html Li Elements Column-wise Under Their Alphabets In Php

I have a php code as shown below which displays list of items (listings) under their alphabets column-wise (show in the fiddle below). php code: if ( is_array( $beta_lists ) &

Solution 1:

You need to remove the multiples <li> between the same letter elements. This is your code:

<liclass="shows-list__letter"><h1class="shows-list__letter-title">B</h1><aclass="shows-list__link"href="http://www.abc.mno/ball/"><h2class="shows-list__title">Ball</h2></a></li><liclass="shows-list__letter"><aclass="shows-list__link"href="http://www.abc.mno/builders/"><h2class="shows-list__title">Builders</h2></a></li>
...

This is how it should be:

<li class="shows-list__letter">
  <h1class="shows-list__letter-title">B</h1><aclass="shows-list__link"href="http://www.abc.mno/ball/"><h2class="shows-list__title">Ball</h2></a><aclass="shows-list__link"href="http://www.abc.mno/builders/"><h2class="shows-list__title">Builders</h2></a><aclass="shows-list__link"href="http://www.abc.mno/bowling/"><h2class="shows-list__title">Bowling</h2></a>
 ....

and then add this to avoid page break between the elements:

.shows-list__letter {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

Result here: https://jsfiddle.net/0ndajurv/

update

In your PHP change

<liclass="shows-list__letter"><?phpif ( $character_title !== $before_title_character ) : $before_title_character = $character_title; ?><h1class="shows-list__letter-title"><?phpecho esc_html( $character_title ) ?></h1><?phpendif; ?><aclass="shows-list__link"href="<?phpecho esc_url( $permalink ); ?>"><h2class="shows-list__title"><?phpecho esc_html( $title ); ?></h2></a></li>

with

<?phpif ( $character_title !== $before_title_character ) : ?><liclass="shows-list__letter"><h1class="shows-list__letter-title"><?phpecho esc_html( $character_title ) ?></h1><?phpendif; ?><aclass="shows-list__link"href="<?phpecho esc_url( $permalink ); ?>"><h2class="shows-list__title"><?phpecho esc_html( $title ); ?></h2></a><?phpif ( $character_title !== $before_title_character ) : 
        $before_title_character = $character_title; ?></li><?phpendif; ?>