Adding a snippet to only one specific item in a loop?

Kirby 2 Solved ✅
1

I hope this is the right place to ask this question. I am having trouble with a loop. I am trying to build a portfolio site, and the basic idea is that there is a list of projects. When you click on the project that section expands to reveal more content and the others stay the same. So the first thing I did was make a loop to have all the projects listed on the main page:

<?php foreach($site->homePage()->children() as $allprojects ): ?>
  <div class="projectbox">
    <a href="<?php echo $allprojects->url() ?>">
      <div class="individualproject">
        <p1> <?php echo $allprojects->title() ?> </p1>
        <p2> <?php echo $allprojects->text() ?> </p2>
      </div>
    </a>
  </div>

<?php endforeach ?>

When I click on a specific project (which is a separate page but with almost the same template), a snippet with the additional text (‘projectfull’) is added. So here is what I did:

<?php foreach($site->homePage()->children() as $allprojects ): ?>
  <div class="projectbox">
    <a href="<?php echo $allprojects->url() ?>">
      <div class="individualproject">
        <p1> <?php echo $allprojects->title() ?> </p1>
        <p2> <?php echo $allprojects->text() ?> </p2>
      </div>
  <?php snippet('projectfull') ?>
    </a>
  </div>

<?php endforeach ?>

Which kind of works: it adds the new snippet where I want it on the page (right under the title of each project) but it adds it to every project, not just the one I click on. If I take it out of the loop it simply puts it at the bottom of the page which I also don’t want.

I can’t seem to be able to fix this. Is there a way for the snippet to load only for the item/page I click on while staying in the right spot? I would appreciate any help! Thanks!

2

Could you post the JavaScript code that handles your click event, please?

3

I didn’t use any js yet, for now all it does is that I click on it and it’s technically a new page, not a click event

4

I think you probably need to get the javascript working first. You were right i think to add the snippet to the loop, but you need to use CSS and javascript to show and hide the content. So technically, yes, the content is there for everyone, you just cant see it visually in the browser.

I would revise the HTML structure though, putting all that inside an anchor tag isnt ideal (or valid). I would probably use figure and figure caption, then hide the caption with CSS. Then make the image an anchor and bind a javascript click event to it that reveals the caption.

Alternatively, you could wire the information into something like GridTab or The Wall, which sounds like the kind of thing your aiming for.

5

Well, yes, but then you just link to a new page instead of showing/hiding your snippet. There are two ways you can implement this:

  • Either, you load everything right from the beginning and the content of the snippet is hidden for all projects on page load and only made visible if you click on the project title.
  • You include an empty div and load the content for each project via Ajax.

I agree with @jimbobrjames that the snippet should sit outside the anker tag.

Both solutions require jQuery though, maybe a bit of overkill just for showing/hiding content (unless you use it anyway)?

6

Sure, it can be done with a few lines of javascript, but, well it’s Friday, I am feeling snazzy :tropical_drink: You never know, they might work with Zepto instead (no mention in the docs) which would reduce it’s weight a fair bit.

7

Okay so I moved the snippet out of the anchor tag (and put it in a div), hid it with CSS (display:none) and now I am trying to get it to display with jquery. I am starting here, and it semi-worked once and then it stopped doing anything. Now it doesn’t really do anything, it doesn’t even go to the page when I click on it. This is where I am starting

  $(".individualproject").click(function(){
        $("#snippet-to-add").css("display","block");
    return false;
    });

So I am:
a) not sure why it’s not working in the first place
b) not sure about how (granted I get this to work) to make sure I only call the snippet for that specific page

(Thanks for the replies in the meantime :slight_smile:)

8

I think you will still have a problem if you want your anker link to work and your click event to work if they are all in one in your html.

Also, instead of adding an ID to your snippet, you should use a class and then find the right element to show by using closest() or something like that.

9

@martaklopf Take a look at this fiddle i just made.

10

The toggle SEEMS to work:

<?php foreach($site->homePage()->children() as $allprojects ): ?>
              <div class="individual-project"> <p1> <?php echo $allprojects->title() ?> </p1> </div>

              <div class="individual-project-toggle">
                <p>
                  <?php echo $allprojects->text() ?>
                </p>
              </div>
              <?php endforeach ?>

For now!

The downside is that I am not linking to separate pages, it’s just all on one, and I am not sure if it will work once I add everything I need to. For now it works though. Thank you all :yellow_heart: !

11

Yes, that’s what I said above. But if you want to have both, you have to separate the two concerns. Maybe add a link to your project page within your (hidden) full text or wrap the heading in a link but have an extra button to toggle more information right in the page.

12

I will try that! Thank you so much!