24 – HOW TO SHOW OR HIDE MODEL FIELDS IN DJANGO – INVOICE MANAGEMENT SYSTEM

1. Make five addition line for the application.

line_six = models.CharField('Line 6', max_length=120, default='', blank=True, null=True)
	line_six_quantity = models.IntegerField('Quantity', default=0, blank=True, null=True)
	line_six_unit_price = models.IntegerField('Unit Price (D)', default=0, blank=True, null=True)
	line_six_total_price = models.IntegerField('Line Total (D)', default=0, blank=True, null=True)

	line_seven = models.CharField('Line 7', max_length=120, default='', blank=True, null=True)
	line_seven_quantity = models.IntegerField('Quantity', default=0, blank=True, null=True)
	line_seven_unit_price = models.IntegerField('Unit Price (D)', default=0, blank=True, null=True)
	line_seven_total_price = models.IntegerField('Line Total (D)', default=0, blank=True, null=True)

	line_eight = models.CharField('Line 8', max_length=120, default='', blank=True, null=True)
	line_eight_quantity = models.IntegerField('Quantity', default=0, blank=True, null=True)
	line_eight_unit_price = models.IntegerField('Unit Price (D)', default=0, blank=True, null=True)
	line_eight_total_price = models.IntegerField('Line Total (D)', default=0, blank=True, null=True)

	line_nine = models.CharField('Line 9', max_length=120, default='', blank=True, null=True)
	line_nine_quantity = models.IntegerField('Quantity', default=0, blank=True, null=True)
	line_nine_unit_price = models.IntegerField('Unit Price (D)', default=0, blank=True, null=True)
	line_nine_total_price = models.IntegerField('Line Total (D)', default=0, blank=True, null=True)

	line_ten = models.CharField('Line 10', max_length=120, default='', blank=True, null=True)
	line_ten_quantity = models.IntegerField('Quantity', default=0, blank=True, null=True)
	line_ten_unit_price = models.IntegerField('Unit Price (D)', default=0, blank=True, null=True)
	line_ten_total_price = models.IntegerField('Line Total (D)', default=0, blank=True, null=True)

2. Make them appear in the application entry form

				'line_six', 'line_six_quantity', 'line_six_unit_price', 'line_six_total_price',
				'line_seven', 'line_seven_quantity', 'line_seven_unit_price', 'line_seven_total_price',
				'line_eight', 'line_eight_quantity', 'line_eight_unit_price', 'line_eight_total_price',
				'line_nine', 'line_nine_quantity', 'line_nine_unit_price', 'line_nine_total_price',
				'line_ten', 'line_ten_quantity', 'line_ten_unit_price', 'line_ten_total_price',

3. Use crispy to display and style them on the entry page

<div class="form-row">
  <div class="form-group col-md-6">
    {{ form.line_five|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_five_quantity|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_five_unit_price|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_five_total_price|as_crispy_field }}
  </div>
</div>


<div class="form-row">
  <div class="form-group col-md-6">
    {{ form.line_six|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_six_quantity|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_six_unit_price|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_six_total_price|as_crispy_field }}
  </div>
</div>


<div class="form-row">
  <div class="form-group col-md-6">
    {{ form.line_seven|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_seven_quantity|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_seven_unit_price|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_seven_total_price|as_crispy_field }}
  </div>
</div>


<div class="form-row">
  <div class="form-group col-md-6">
    {{ form.line_eight|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_eight_quantity|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_eight_unit_price|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_eight_total_price|as_crispy_field }}
  </div>
</div>

<div class="form-row">
  <div class="form-group col-md-6">
    {{ form.line_nine|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_nine_quantity|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_nine_unit_price|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_nine_total_price|as_crispy_field }}
  </div>
</div>


<div class="form-row">
  <div class="form-group col-md-6">
    {{ form.line_ten|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_ten_quantity|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_ten_unit_price|as_crispy_field }}
  </div>
  <div class="form-group col-md-2">
    {{ form.line_ten_total_price|as_crispy_field }}
  </div>
</div>

4. Make a button to show and hide additional line

<button id='more-line' type="button" class="btn btn-primary">Show / Hide More Lines</button>

5. Use jQuery slideToggle function to display or hide the lines

  $('#div_id_line_six, #div_id_line_six_quantity, #div_id_line_six_unit_price, #div_id_line_six_total_price, #div_id_line_seven, #div_id_line_seven_quantity, #div_id_line_seven_unit_price, #div_id_line_seven_total_price, #div_id_line_eight, #div_id_line_eight_quantity, #div_id_line_eight_unit_price, #div_id_line_eight_total_price, #div_id_line_nine, #div_id_line_nine_quantity, #div_id_line_nine_unit_price, #div_id_line_nine_total_price, #div_id_line_ten, #div_id_line_ten_quantity, #div_id_line_ten_unit_price, #div_id_line_ten_total_price').hide()

    $('#more-line').click(function(){
        $('#div_id_line_five, #div_id_line_five_quantity, #div_id_line_five_unit_price, #div_id_line_five_total_price').slideToggle(200)
        $('#div_id_line_six, #div_id_line_six_quantity, #div_id_line_six_unit_price, #div_id_line_six_total_price').slideToggle(200)
        $('#div_id_line_seven, #div_id_line_seven_quantity, #div_id_line_seven_unit_price, #div_id_line_seven_total_price').slideToggle(200)
        $('#div_id_line_eight, #div_id_line_eight_quantity, #div_id_line_eight_unit_price, #div_id_line_eight_total_price').slideToggle(200)
        $('#div_id_line_nine, #div_id_line_nine_quantity, #div_id_line_nine_unit_price, #div_id_line_nine_total_price').slideToggle(200)
        $('#div_id_line_ten, #div_id_line_ten_quantity, #div_id_line_ten_unit_price, #div_id_line_ten_total_price').slideToggle(200)
    });

Boom! we are set. Isn’t that easy?

If you find some value in our work, you might want to support us to do more on Patreon. Here is the like: www.patreon.com/arbadjie