New kind of Kinklist for DWRP - UPDATE 03/15/25

Mon, 02 Sep 2024 02:17:43 GMT

Posted by: itsanooray

Open and Close Kinklist with Notations

Preview Images
Warning: sexual content

Live Example
See under the cut.
Warning: sexual content
( See Live Example )

Why Was This Made?
The kink lists that are commonly used have "hover to see notes" bullshit. A lot of browsing happens on phones, and guess what you can't hover on. I made this as an experiment to have a list with an option for notes, both short and long.

Features

Uses <details> to collapse content that can be clicked to open, and clicked to shut. This helps with the extra length this pattern causes.
Has a section for a Key, for when you like to have different symbols to mean something. I put in basic ones, but you can use whatever you'd like. I use this site to find HTML entities to use.
Has a built in "Note" section. Please read the instructions about them included in the code you'll copy, since you will need to remove or add a bit of CSS to make them show or hide.
HTML is notated for easier use.
Inline CSS is on their own line. This does increase the length of the code, but should be much easier to read and edit for code amateurs.
NEW! CSS Variables used for colors. Only need to change the hex code for a color in one place and it will work throughout!

Rules
→ To use this code for free, all I ask is for a link back to Better Dolphin, somewhere on your profile/journal! You can copy and paste this:
Made by: <user name="betterdolphin">

→ You may edit the code to suit your needs or tastes, however, you are not allowed to redistribute, share or resell.

Tip?
If you'd like to donate a couple bucks, hit up my ko-fi!

Get the Code!

<raw-code>

<div style="--noteColor: #f5f5f5;
            --yesColor: #cdfadb;
            --yesLightColor: #e7fded;
            --maybeColor: #f6fdc3;
            --maybeLightColor: #fbfee8;
            --noColor: #ffa8a5;
            --noLightColor: #ffdad8;
            --black: #333;
            font: 16px arial, sans-serif;
            margin: 0 auto;
            max-width: 600px;
            width: 100%;
            ">
    <div style="                
            background-color: var(--noteColor);
            color: var(--black);
            padding: 5px 10px;
            font-size: 16px;
            margin: 0 0 10px;
            ">
        <i>Key</i>: ♥ = Favorite; ← = Receiving; → = Giving; ↔ = Both
    </div>
    
    <details>
        <summary style="
               font-size: 20px;
               text-transform: uppercase;
               letter-spacing: 1px;
               padding: 20px;
               background-color:var(--yesColor);
               color: var(--black);
        ">
            Yes
        </summary>
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--yesLightColor);
               color: var(--black);
               ">
            • Chocolate ♥
        </div>
        <div style="
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--yesLightColor);
               font-style: italic;
               ">
            I love chocolate but I can only have it in small amounts, otherwise I get really sick. Milk chocolate
            isn't as bad as dark chocolate, but white chocolate is the worst.
        </div>
        
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--yesLightColor);
               color: var(--black);
               ">
            • Caramel →
        </div>
        <div style="
               display: none;
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--yesLightColor);
               font-style: italic;
               ">
            Text here.
        </div>
        
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--yesLightColor);
               color: var(--black);
               ">
            • Nutella ♥
        </div>
        <div style="
               display: none;
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--yesLightColor);
               font-style: italic;
               ">
            Text here.
        </div>
        
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--yesLightColor);
               color: var(--black);
               ">
            • Pineapple
        </div>
        <div style="
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--yesLightColor);
               font-style: italic;
               ">
            The cheap kind that's like bad jam, not actual pineapple chunks
        </div>
        
    </details>
    
    <details>
        <summary style="
               font-size: 20px;
               text-transform: uppercase;
               letter-spacing: 1px;
               padding: 20px;
               background-color: var(--maybeColor);
               color: var(--black);">
            Maybe
        </summary>
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--maybeLightColor);
               color: var(--black);
               ">
            • Banana ↔
        </div>
        <div style="
               display: none;
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--maybeLightColor);
               font-style: italic;
               ">
            Text here.
        </div>
        
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--maybeLightColor);
               color: var(--black);
               ">
            • Cherries
        </div>
        <div style="
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--maybeLightColor);
               font-style: italic;
               ">
            Depends on what kind, ranier cherries are good, marichina cherries is bad, ask about other kinds!
        </div>
        
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--maybeLightColor);
               color: var(--black);
               ">
            • Almonds
        </div>
        <div style="
               display: none;
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--maybeLightColor);
               font-style: italic;
               ">
            Text here.
        </div>
        
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--maybeLightColor);
               color: var(--black);
               ">
            • Walnuts
        </div>
        <div style="
               display: none;
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--maybeLightColor);
               font-style: italic;
               ">
            Text here.
        </div>
        
    </details>
    
    <details>
        <summary style="
               font-size: 20px;
               text-transform: uppercase;
               letter-spacing: 1px;
               padding: 20px;
               background-color: var(--noColor);
               color: var(--black);">
            No
        </summary>
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--noLightColor);
               color: var(--black);
               ">
            • Coconut
        </div>
        <div style="
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--noLightColor);
               font-style: italic;
               ">
            The absolute worst.
        </div>
        
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--noLightColor);
               color: var(--black);
               ">
            • Peanuts
        </div>
        <div style="
               display: none;
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               border-left: 5px solid var(--noLightColor);
               font-style: italic;
               ">
            Text here.
        </div>
        
        
        <div style="
               letter-spacing: 1px;
               padding: 6px 20px;
               background-color: var(--noLightColor);
               color: var(--black);
               ">
            • Peanut butter
        </div>
        <div style="
               display: none;
               background-color: var(--noteColor);
               color: var(--black);
               padding: 6px 20px;
               font-size: 14px;
               background-color: var(--noLightColor);
               font-style: italic;
               ">
            Text here.
        </div>
        
    </details>
</div></raw-code>

The code is also available to play with on Codepen! This way you can play with the code and see how it works, or if you have your own account you can fork it and make permanent changes.

Thanks! Hope you enjoy!

comments