Rearrange content in a row based on if conditions

Question

I have a html like this:

<div class="row">
  {% if show_name %}
    <div class="columns large-4">
      <label>Name</label>
      <p>{{ object.name }}</p>
    </div>
  {% endif %}

  {%if show_email %}
  <div class="columns large-4  large-text-right">
    <label>Email</label>
    <p>{{ object.email }}</p>
  </div>
  {% endif %}
  
</div>

This works correctly when both the columns are to be shown. But if I should only the second column then this is right aligned in the first column because of large-text-right class. If there was only one row then I can use if else condition inside the div itself. But there are a lot of such rows with different conditions. Is there any way where I can implement the logic once and use it on all rows? I am using jquery in other parts of the project. So if there is any jquery solution then that is also fine.

EDIT 1

If show_name is false , then I want the code to be:

<div class="row">
  {%if show_email %}
  <div class="columns large-4">
    <label>Email</label>
    <p>{{ object.email }}</p>
  </div>
  {% endif %}

So that email is left aligned in the first column of the same row if the previous field in the first column is not present.

These fields might be put into some other row for example:

<div class="row">
  {% if show_name %}
    <div class="columns large-4">
      <label>Name</label>
      <p>{{ object.name }}</p>
    </div>
  {% endif %}

</div>

<div class="row">
  {% if show_fullname %}
    <div class="columns large-4">
      <label>Full Name</label>
      <p>{{ object.full_name }}</p>
    </div>
  {% endif %}

  {%if show_email %}
  <div class="columns large-4  large-text-right">
    <label>Email</label>
    <p>{{ object.email }}</p>
  </div>
  {% endif %}

</div>

Now here in the second part the email field should be left aligned in the first column of the second row only when show_fullname is false . Basically for every div that has a class large-text-right , I should check if it has an element present before it in the same row and if not then that class should be removed.

Answer 1

I am not sure that i fully understand you problem, but have you tried something like this? ex: <div class="columns large-4 {% if show_name %}large-text-right {% endif %}">

Answer 2

If I understand your issue correctly you don't want the email to be right aligned if the name is not present. In which case you need to wrap the large-text-right css class in a conditional statement that checks for show_name .

<div class="row">
  {% if show_name %}
    <div class="columns large-4">
      <label>Name</label>
      <p>{{ object.name }}</p>
    </div>
  {% endif %}
  {%if show_email %}
  <div class="columns large-4 {% if show_name %}large-text-right{% endif %}">
    <label>Email</label>
    <p>{{ object.email }}</p>
  </div>
  {% endif %}
</div>