Search code examples
htmlcsshugo

CSS fix positioning of anchors next to details summary

I'm working on my Hugo site (repo here). I want to add a details element next to anchors, all styled to look the same, as shown in the first screenshot ("abstract" is the details element that reveals the abstract when clicked; "paper" and "slides" are links to PDFs).

enter image description here

But when the details element is open, this pushes the anchors below the text of the abstract, as shown in the second screenshot.

enter image description here

Is it possible to keep the anchors in their position from the first screenshot when the details element is open?

Here's the markup for the page:

## working papers

1. **A dynamic spatial knowledge economy** (JMP) <br>
    <details>

    <summary>abstract</summary>

    Cities have long been thought to drive economic growth. ...

    </details>
    <a href="/files/p-dske_paper.pdf" class="button">paper</a>
    <a href="/files/p-dske_slides.pdf" class="button">slides</a>

And here's the custom CSS I'm currently hacking on (would go in static/css/custom.css):

details {
    display: inline-block;
    margin-bottom: 1em;
}
summary {
    background-color: #EBEBEB;
    border: none;
    color: #2774AE;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline;
    font-size: 12px;
    margin: 1px;
    border-radius: 10px;
}
summary:hover {
    background: #FFC72C;
}
details>summary {
    list-style: none;
}
details>summary::-webkit-details-marker {
    display: none;
}
details[open] summary {
    display: -webkit-inline-flex;
    position: relative;
    top: 0px;
    right: 0%;
    margin-bottom: 0.5em;
}

.button {
    background-color: #EBEBEB;
    border: none;
    color: #2774AE;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 1px;
    border-radius: 10px; /* rounded corners */
}
.button:hover {
    background-color: #FFC72C;
    color: #2774AE;
}
Solution

  • You need to group the trigger and links together, and have the content live outside of that group. Then using JS, you can toggle visibility of that content using an event listener, the event being the mouse click.

    Update:

    Initially I wasn't sure if you needed this to support multiple sections, and it looks like you do. The way this is set up is that the button triggers (inside nav) have an attribute called data-nav followed by a number. If you look inside the details div, there are content blocks that have an attribute called data-summary followed by a number. The JS will watch for the button triggers to be clicked. Once they are, it will take that data-nav number, and check for details div's with the same number assigned to the data-summary attribute. If it already has .show that makes it visible, then it will remove it. If it doesn't have that class, then it will remove that class from all of the other items (in case it's active somewhere else) and then add it to the one you just clicked.

    document.querySelectorAll('nav .summary').forEach(function(summary) {
  summary.addEventListener('click', function() {
    var dataAtt = this.getAttribute('data-nav');
    var matchTarg = document.querySelector('.summary-target[data-summary="' + dataAtt + '"]');
    
    if (matchTarg.classList.contains('show')) {
      matchTarg.classList.remove('show');
    } else {
      document.querySelectorAll('.summary-target').forEach(function(element) {
        element.classList.remove('show');
      });
      matchTarg.classList.add('show');
    }
  });
});


/*$('nav .summary').each(function(){
  $(this).click(function(){
    var $dataAtt = $(this).attr('data-nav');
    var $matchTarg = $('.summary-target[data-summary="'+$dataAtt+'"]');
    
    if( $matchTarg.hasClass('show') ){
      $matchTarg.removeClass('show');
    } else {
      $('.summary-target').removeClass('show');
      $matchTarg.addClass('show');
    }
  });
});*/
    .details {
    display: block;
    margin-top: 1em;
}
.details .summary-target {
    display: none;
}
.details .summary-target.show {
    display: block;
}

nav {
  user-select: none;
}
nav * {
  cursor: pointer;
}

.summary {
    background-color: #EBEBEB;
    border: none;
    color: #2774AE;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline;
    font-size: 12px;
    margin: 1px;
    border-radius: 10px;
}
.summary:hover {
    background: #FFC72C;
}
nav .summary {
    list-style: none;
}
nav .summary::-webkit-details-marker {
    display: none;
}
nav .summary {
    display: -webkit-inline-flex;
    position: relative;
    top: 0px;
    right: 0%;
    margin-bottom: 0.5em;
}

.button {
    background-color: #EBEBEB;
    border: none;
    color: #2774AE;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 1px;
    border-radius: 10px; /* rounded corners */
}
.button:hover {
    background-color: #FFC72C;
    color: #2774AE;
}
    <h1>A dynamic spatial knowledge economy** (JMP)</h1>
<nav>
  <div class="summary" data-nav="1">abstract 1</div>
  <div class="summary" data-nav="2">abstract 2</div>
  <div class="summary" data-nav="3">abstract 3</div>
  <a href="/files/p-dske_paper.pdf" class="button">paper</a>
  <a href="/files/p-dske_slides.pdf" class="button">slides</a>
</nav>

<div class="details">
  <div class="summary-target" data-summary="1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  </div>
  <div class="summary-target" data-summary="2">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div> 
  <div class="summary-target" data-summary="3">
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>
</div>