What is the best way to set up a side-opening feature in the UI design?

I am having trouble with the Amoclan shape transitioning to the next side. I need the transition to occur exactly as specified in the documentation, but for some reason it is still moving on to the next side.

<html>
<head>
    <script src="static/jquery-2.2.4.js"></script>
    <link rel="stylesheet" type="text/css" href="static/semantic.min.css">
    <script src="static/semantic.js"></script>
</head>
<body>

    <div class="ui shape">
      <div class="sides">
        <div class="side active">This side starts visible 1</div>
        <div class="side two">This is yet another side 2</div>
        <div class="side three">This is yet another side 3</div>
      </div>
    </div>
    <br>

    <div id="move">move</div>

    <script>
        $('#move').click(function(){
            $('.shape').shape('.three', '.second.side').shape('flip left')
        })
    </script>
</body>

What steps should I take to fix this issue?

Answer №1

Your requested code example is now working perfectly. I have corrected a small mistake and made sure it meets your requirements.

$('#move').on('click', function(){ 
            $('.shape').shape('.three', '.second.side').shape('flip left')
        })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://semantic-ui.com/dist/semantic.min.js"></script>
<link href="http://semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>

<div class="ui shape">
      <div class="sides">
        <div class="side active">This side starts visible 1</div>
        <div class="side two">This is yet another side 2</div>
        <div class="side three">This is yet another side 3</div>
      </div>
    </div>
    <br>

    <div id="move">move</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Activating a hyperlink within a Div element by clicking on the Div itself

In my card element, I have a link that, when clicked, opens a modal pop-up containing all the necessary project information. I am currently attempting to trigger a click event on that link whenever any part of the div is clicked. This task is for a school ...

Customize PrimeNG component styles

Utilizing the PrimeNG OverlayPanel for a dropdown click feature, I am encountering an issue with moving the default left arrow to the right position. Despite trying various solutions, I have reached a dead end. Would you be able to provide me with some fr ...

Trouble with Bootstrap modal not popping up following the switch to Bootstrap 5 and jQuery 3 on ASP.NET Core platform

In a recent update, I made changes to jQuery and Bootstrap versions in my ASP.NET Core project. After updating jQuery from v2.2.4 to v3.7.1 and Bootstrap from v2.2.2 to v5.0.2, I encountered an issue where modal pop-ups were not triggering when buttons wer ...

The Consequences of Using Undeclared Variables in JavaScript

What is the reason behind JavaScript throwing a reference error when attempting to use an undeclared variable, but allowing it to be set to a value? For example: a = 10; //creates global variable a and sets value to 10 even though it's undeclared al ...

A universal setting takes precedence over Vuetify divider colors

Since upgrading Vuetify from version 1.1.9 to 1.2.3, I have encountered a strange issue where all of my dividers appear much darker than before and different from the examples in the documentation. This is how it should look: https://i.sstatic.net/GnxzV. ...

Compare the selected values of radio buttons with an array and find matches

I have multiple radio button groups, where each selection in a group corresponds to predefined values in an array. For example, selecting option 1 in Group 1 will increment values A and B by 1, while selecting option 2 will increment B, C, and D. The goal ...

Using Javascript to dynamically enable or disable an input field depending on the choice made in another field

I attempted to implement the solution provided in this answer for my code: How do I disable input field when certain select list value is picked but unfortunately, it is not working as expected. The scenario involves an HTML select field with the ID &apos ...

Wrap each object in a container and then insert its key and values into that container using jQuery

How can I wrap each item and then insert the object's indexes and values into each created wrapper? I've attempted to accomplish this using the following code: $.ajax({ url: "some url", type: "GET", success: function(data) { var data ...

Issue encountered with IONIC data tables in Ionic 1.x when integrating with Angular 1.x

I am attempting to integrate angular datatables from this source, but encountering the following error ionic datatable error snippet <head> <script src="js/controllers.js"></script> <script src="js/services.js"></script> ...

Iterate over the values of the labels and append a distinct word based on the position within

I have a series of radio buttons with labels that I want to customize with different words based on the index you are looping through. For example: a apple, b bob, c cab, d dash Here is my HTML: <div id="charity-mod"> <div> <input id ...

Identifying the moment when the body scroll reaches the top or bottom of an element

I have been experimenting with javascript and jquery to determine when the window scroll reaches the top of a specific element. Although I have been trying different methods, I have yet to see any successful outcomes: fiddle: https://jsfiddle.net/jzhang17 ...

When hovering over an element, I must utilize a selector and reference a variable that was defined outside of the hover state in order to

Explaining this code may be a challenge, but I'll give it my best shot. Here's the code snippet: $('#navibar a').hover(function(){ var position = $(this).position(); var width = $(this).width(); $('#underliner'). ...

How to ensure a table in MaterialUI always maintains full width without requiring horizontal scrolling in CSS?

After attempting to allocate each widthPercent value on the TableHeader so they sum up to 100%, I am still experiencing the presence of a scroll bar. I have tried setting fixed widths for each column, but this results in excess space on the right side dep ...

During an AJAX call in MVC, the DDL remains unchanged

I am looking to update the value of location dynamically during an ajax call, in order to save the user time from manually changing it. I have attempted a solution but it doesn't seem to be working as expected. Any ideas on where I might be going wron ...

My JavaScript functions are not compliant with the HTML5 required tag

I am currently developing input fields using javascript/jQuery, but I am facing an issue with the required attribute not functioning as expected. The form keeps submitting without displaying any message about the unfilled input field. I also use Bootstrap ...

Troubleshooting: Jquery UI Draggable - Cursor losing track of draggable element

I want to create a draggable popup with Jquery UI functionality, but I'm facing an issue where the cursor does not stay aligned with the popup element when dragged. When dragging the popup element to the left, the mouse cursor goes beyond the div elem ...

container dimensions for images

Is there a way to make an image adjust its size according to the container? For example, if the container is 100x100 pixels and the image within it is 90x80 pixels, can we make sure that the smaller property of the image (height in this case) adjusts to f ...

The issue arises when attempting to execute an Ajax function within a JQuery append method, causing malfunction

My JQuery append function is calling an ajax function within the onChange method. Here is my code snippet: var data='<?php echo $data; ?>'; var tambah=1; var txt=1; function add_fullboard_dalam_kota(){ function showU(str) { ...

What is the best way to store textarea information into a session using the jQuery AJAX post method in Codeigniter?

I am having trouble saving the text from a textarea to the Controller session using jQuery AJAX post method in Codeigniter Smarty. I am unable to save the data to the session. Can someone please provide me with guidance and a detailed example of how to ach ...

Ways to modify the font style of Python comments in JupyterLab's code cells and code editor:

Many resources discuss how to change font families for all content, but I am seeking guidance on making syntax-specific changes. For example, I would like to switch the font style of Python comments from italic to normal. Can anyone offer assistance? Thank ...