Have menu filling up next column, as menu expands

[cthornval]

I am working on a page where I currently have a menu of 12 projects. On hover a project is underlined and on click a project expands vertically displaying a description.

I have used a table to layout this menu. I wish to create a function where the menu is only able to expand untill a certain point, before it begin "filling up" the next column with the remainder of the menu.

Below I have attached a mock-up GIF, showing the desired function. I have also pasted in some of my code.

Please forgive my simplistic description, I am still in the process of familiarizing myself with coding.!

<table id="content">
    <tr>
        <td id="Project1">
                Wer Baut Der Stadt 2019
            <br>
                <p class="Describtion1" style="display:none;">
                Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin. 
                </p>
            <br>
        </td>
        <td>2019</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>

body {
  font-family: 'Helvetica Neue';
  text-align: center;

  position: absolute;
  width: 100%;
}

#content {
  width: 100%;
  border-spacing: 0;

  margin-top: 200px;

}

#content td span {
  text-overflow: ellipsis;
  overflow : hidden;

  display: block;

  border-left: 7px solid #fff;
  border-right: 7px solid #fff;
  padding: 16px;
  vertical-align: top;
  text-align: left;
  font-size: 45px;

}


#content td {
  vertical-align: top;
  font-size: 45px;

}


#content td:nth-child(odd) {
  width: 30%;
}

#content td:nth-child(even) {
  width: 3%;
}


  #Project1:hover {
    text-decoration: underline;
      cursor: default;
  	}


p {

display: inline-block;
text-align: left;
padding-left:30px;
padding-right:30px;
font-size: 30px;

}

![![0_1578575097296_Scooch.gif](Uploader 100%) <script>

           $(document).ready(function(){
             $("#Project1").click(function(){
               $("p.Describtion1").toggle();](![image url](![image url](![image url](image url))))
             });
           });

       </script>

[avan]

@cthornval
Great job phrasing your question and providing enough info to answer your question.

Here is what you can do.

Codepen version: https://codepen.io/avansardar/pen/MWYVGzq

I had to change some things around. You should still be able to achieve what you set out to do. The key is the Flexbox.

HTML:

  <div class="container">
      <ul>
        <li class="li_element">
          1
            <p>
                Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                </p>
        </li>
        <li class="li_element">
          2
          <p>
                Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                </p>
        </li>
        <li class="li_element">
          3
          <p>
                Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                </p>
        </li>
        <li class="li_element">
          4
          <p>
                Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                </p>
        </li>
        <li class="li_element">
          5
          <p>
                Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                </p>
        </li>
        <li class="li_element">
          6
          <p>
                Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                </p>
        </li>
        <li class="li_element">
          7
          <p>
                Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                </p>
        </li>
      </ul>
    </div>

CSS:

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;
}
li {
  height: 100px;
}
.expand{
  height: 140px;
}

JS:

$(document).ready(function(){
    $(".li_element").each(function(index) {
    $(this).find("p").first().hide();
    });

     $("li").click(function(){
       $(this).find("p").first().toggle();
       $(this).toggleClass("expand");
     });
});

Let me know what questions you have.

[cthornval]

Hey Avan

I changed my page according to your work above and I am very please with how the flexbox operates and is so dynamic! Thank you so much!

Only, I ran into some small complications:
The reason I originally used the table, layout was because I was able to perfectly align a project with a year, and on toggle, everything remained aligned. also the years were placed in the next column and so everything was perfectly aligned both horizontally and vertically.

The best way to recreate that, is to place a span containing the year after, <li class="li_element"> hereafter I have manually spaced that span to be aligned, but doing it this way honestly makes me feel like a real noob. What's the best way around this, do you think?

Also there's a small issue with the undelining, as I wish to only have the project underlined and not the year. Rigt now I have span inside of a span (as to align), but it's tricks to select only one of these in css.

I really appreciate your help!

heres some new code

<div class="content">

    <ul style="list-style: none;">


        <li class="Project">
              
                    <span id="myBtn">
                        Wer Baut Der Stadt
                     

                    <span> 
                        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp2019
                    </span>
                    </span>

                        <div class="Describtion">
                            <p style="display:none;">
                            Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin. 
                            </p>
                        </div>

                        <div id="myModal" class="modal">
                            <div class="modal-content">
                                <span class="close">&times;
                                </span>
                                <p>Some text in the Modal..
                                </p>
                            </div>
                        </div>
        </li>

        li {
          padding-top: 40px;
        }
        
        
        body {
          font-family: 'Helvetica Neue';
          font-size: 45px;
        }
        
        
        .content {
          margin-top: 150px;
        }
        
        
        
        .Project.myBtn hover{
          text-decoration: underline;
        }
        
        .Project:hover  {
          cursor: default;
        }
        
        
        
        p {
        
        display: inline-block;
        text-align: left;
        
        padding-left:30px;
        padding-right:30px;
        font-size: 30px;
        
        width: 700px;
        
        }

[avan]

In terms of alignment and formatting I would recommend using the css attribute 'margin'.
Try adding margin to any element to see its effect. You can 'margin' for all around margin or margin-left, margin-right, margin-top or margin-bottom. Try messing with that and see if that helps you achieve what you trying to do. Let me know if I misunderstood your question.

[cthornval]

Thank you again!
I ended up using margin-right, and float properties It's working pretty great in my opinion

[avan]

@cthornval

Awesome! Glad to hear. Do you mind selecting one of my responses as the correct answer? Thanks.