Html Question posted in
Some basic documentation can be found here.

Html – 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;
}
Tags:

2

Answers


  1. 0

    You can use tag with an onclick event. but you have to use some JavaScript too.

     <button onclick="abstract()">abstract</button>
 <a href="/files/p-dske_paper.pdf" class="button">paper</a>
 <a href="/files/p-dske_slides.pdf" class="button">slides</a>

    after use button you can add your other links

    in javascript,

    <script>
    function abstract(){    
        document.getElementById("demo").innerHTML="Cities have long been thought to drive economic growth. ..." ;
    }   
</script>

    I hope you will get the output that you want.

    more refer in here Onclick event

    Login or Signup to reply.
  2. 0

    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.

    document.querySelector('.summary').addEventListener('click', function(){
  var st = document.querySelector('.summary-target');
  st.classList.toggle('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">abstract</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">
        Cities have long been thought to drive economic growth. ...
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search