Swipeout on card in accordion

I have 9 accordions. Each accordion can have anything from ZERO cards to X cards. I want to allow a swipeout on each card.

So far this is what I have but I get nothing

<div class="list accordion-list">
    <ul>
        <!-- originally had the swipeout in this li but it deleted the entire accordion -->
        <li class="accordion-item">
            <a href="" class="item-link item-content">
                <div class="item-inner">
                    <span id="kill_count" class="card-count">1</span>
                    <div class="item-title">Murders</div>
                </div>
            </a>
             <!-- I also tried the swipeout on the following div -->
            <div class="accordion-item-content">
              <span class="swipeout" data-comment="this does nothing">
              <a href="/message/13/" class="item-link">
              <div class="card alert-read">
                <div class="card-content card-content-padding">
                  <span class="alert-title">Murder</span>
                  <span class="kill-location">On a Train</span>
                  <span><br>Sat Nov 9 2019 09:23:51</span>
                </div>
              </div>
              </a>                
              <div class="swipeout-actions-right">
                <a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a>
              </div>
              </span>
            </div>
        </li>

Here you can try this:

<div class="list accordion-list">
<ul>
    <!-- originally had the swipeout in this li but it deleted the entire accordion -->
    <li class="accordion-item">
        <a href="" class="item-link item-content">
            <div class="item-inner">
                <span id="kill_count" class="card-count">1</span>
                <div class="item-title">Murders</div>
            </div>
        </a>
         <!-- I also tried the swipeout on the following div -->
        <div class="accordion-item-content">
        	<ul>
				<li class="swipeout">
					<div class="item-content swipeout-content">
						<div class="item-inner">
							<div class="item-title-row">
								<div class="item-title">...</div>
								<div class="item-after">...</div>
							</div>
							<div class="item-text">...</div>
						</div>
					</div>
					<div class="swipeout-actions-right">
						<a href="#" class="swipeout-delete">Delete</a>
					</div>
				</li>
			</ul>
        </div>
    </li>
</ul>
</div>

I didn’t customize the swipeout card. You can configure it as it suits your needs.

If you’re getting the cards dynamically, I suggest you to use Template7 (https://idangero.us/template7/) another great library from Vladimir.

1 Like

Thanks Nathan… I’ll try this now.

When you say getting the cards dynamically, I do pull the card data from an IndexedDB and build the cards on page load. I may have to circle back on template7 as I have my plate full just trying to port this over from JQM.

A friend of mine over at AppStudio wrote a conversion program to convert JQM to Bootstrap4 but I think I want to stay with F7. @nolimits4web has done a really nice job on it!