How To Hide/Show Column Based on Content Using PHP

Beginners - Learning PHP
#1

Can I please get some help with PHP - I have no idea how to get this to work. I have the HTML below and would like some help with code so that it does the following.

  1. If there is content in the left-column and no content in the right-column, make the left-column 100%.

  2. If there is content in the left and right columns, make the left-column 75% and the right-column 25%.

<div class="container">
  <div id="left-column">
   <jdoc:include type="component" />
  </div>

  <div id="right-column">
   <jdoc:include type="modules" name="col-right" style="well" />
  </div>
</div>

Thanks in advance!

#2

Oooops it removed the HTML code. How do I add code in the post? I don’t see a code tag.

Thanks!

#3

Highlight your code then press Ctrl-Shift-C which will format your code like this

<div class="pt-2 container">
 <div class="row">
  <div class="col-md-12"><img src="heading.gif" class="rounded w-100 img-fluid" alt="image"></div>
 </div>
</div>
#4

OK. Thank you. Here is the code:

<div class="container">
  <div id="left-column">
   <jdoc:include type="component" />
  </div>

  <div id="right-column">
   <jdoc:include type="modules" name="col-right" style="well" />
  </div>
</div>
#5

define ‘content’?

<script>
var leftContent = document.getElementById("left-column");
var rightContent = document.getElementById("right-column");
if(rightColumn.textContent.length == '<jdoc:include type="modules" name="col-right" style="well" />') {
    leftColumn.classList.add("full-width");
}


</script>

But you should design the CSS around a specific way first and only change based on conditions.

#6 
<script>
var leftContent = document.getElementById("left-column");
var rightContent = document.getElementById("right-column");

if(rightColumn.textContent.length == '<jdoc:include type="modules" name="col-right" style="well" />') {
    leftColumn.classList.add("full-width");
}
</script>

So I add the script above that you provided and I add the CSS below but something is missing. I assume I need something else in the CSS because when I remove the content from the right column, the left column does not fill the space, what css do I need to add to do that?

#left-column, #right-column {
	float:	left;
}

#left-column {
	width:	75%;
}

#right-column {
	width:	25%;
}

Content means anything at all that is in the left-column or the right-column divs.

Thanks!

#7

You need to add the classes for the CSS that do what you want. I just did a snippet, you may also want to remove classes, I don’t know.

#8

OK, I will try that. Thanks

#9

Hi, I am not a PHP expert but if I understand what you want, this is how I would do it :-
First I would use PHP to establish which columns I have data for, then I would have different CSS for each possibility, then I would use the PHP include command to include the correct CSS for that result
Just a suggestion

Sponsor our Newsletter | Privacy Policy | Terms of Service