Alternate articles between left and right

February 17, 2022

I will have articles on the page, and there should be alternation, so the first article goes on the left, the second on the right

Now, in the example, I have all the articles displayed twice, both on the left and on the right

How can I make alternation and not display unnecessary ones?

<div class="container">
    <div class="article-list">
        <div class="article article--left">
            <h2 class="article_title">Article 1 (l)</h2>
        </div>

        <div class="article article--right">
            <h2 class="article_title">Article 1 (r)</h2>
        </div>
        
        <div class="article article--left">
            <h2 class="article_title">Article 2 (l)</h2>
        </div>

        <div class="article article--right">
            <h2 class="article_title">Article 2 (r)</h2> 
        </div>
        
        <div class="article article--left">
            <h2 class="article_title">Article 3 (l)</h2> 
        </div>

        <div class="article article--right">
            <h2 class="article_title">Article 3 (r)</h2>
        </div>
        
        <div class="article article--left">
            <h2 class="article_title">Article 4 (l)</h2>
        </div>

        <div class="article article--right">
            <h2 class="article_title">Article 4 (r)</h2>
        </div>
    </div>
</div>

>Solution :

Through nth-child you can select the necessary elements and hide them

.article:nth-child(2) {display: none;}
.article:nth-child(3) {display: none;}
.article:nth-child(6) {display: none;}
.article:nth-child(7) {display: none;}

<div class="container">
    <div class="article-list">
        <div class="article article--left">
            <h2 class="article_title">Article 1 (l)</h2>
        </div>

        <div class="article article--right">
            <h2 class="article_title">Article 1 (r)</h2>
        </div>
        
        <div class="article article--left">
            <h2 class="article_title">Article 2 (l)</h2>
        </div>

        <div class="article article--right">
            <h2 class="article_title">Article 2 (r)</h2> 
        </div>
        
        <div class="article article--left">
            <h2 class="article_title">Article 3 (l)</h2> 
        </div>

        <div class="article article--right">
            <h2 class="article_title">Article 3 (r)</h2>
        </div>
        
        <div class="article article--left">
            <h2 class="article_title">Article 4 (l)</h2>
        </div>

        <div class="article article--right">
            <h2 class="article_title">Article 4 (r)</h2>
        </div>
    </div>
</div>

If you are using php you can try this

<?php foreach ($articles as $index => $article): ?>
    <div class="article-list">
        <?php  if ($index % 2 === 1): ?>
            <div class="article article--left" >
                <h2 class="article_title">{{ $article->title }}</h2>
            </div>
            
        <?php else: ?>

            <div class="article article--right">
                <h2 class="article_title">{{ $article->title }}</h2>
            </div>
        <?php endif; ?>
    </div>
<?php endforeach; ?>