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:

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

This is how it should be:

<li class="shows-list__letter">
  <h1 class="shows-list__letter-title">B</h1>
  <a class="shows-list__link" href="http://www.abc.mno/ball/">
     <h2 class="shows-list__title">Ball</h2>
  </a>
  <a class="shows-list__link" href="http://www.abc.mno/builders/">
     <h2 class="shows-list__title">Builders</h2>
  </a>
  <a class="shows-list__link" href="http://www.abc.mno/bowling/">
     <h2 class="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

<li class="shows-list__letter">
    <?php if ( $character_title !== $before_title_character ) : $before_title_character = $character_title; ?>
        <h1 class="shows-list__letter-title"><?php echo esc_html( $character_title ) ?></h1>
    <?php  endif; ?>
    <a class="shows-list__link" href="<?php echo esc_url( $permalink ); ?>">
        <h2 class="shows-list__title"><?php echo esc_html( $title ); ?></h2>
    </a>
</li>

with

<?php if ( $character_title !== $before_title_character ) : ?>
    <li class="shows-list__letter">
        <h1 class="shows-list__letter-title"><?php echo esc_html( $character_title ) ?></h1>
<?php  endif; ?>
        <a class="shows-list__link" href="<?php echo esc_url( $permalink ); ?>">
            <h2 class="shows-list__title"><?php echo esc_html( $title ); ?></h2>
        </a>
<?php if ( $character_title !== $before_title_character ) : 
        $before_title_character = $character_title; ?>
    </li>
<?php  endif; ?>