Draw arrow between two flex items

I want the arrow to be inserted between two flex items as they are added(Please run the code). It must be added after the first flex item for every added flex item between them so that they appear connected by the arrow. The arrow must be at the midpoint of box boundaries ( not box centre) connecting them.

$('#clickMe').click(function() {
    $('#Demosss').append($('<li  class="flex-item">').text('text'))
    $(this).insertAfter($('[class^="flex-item"]').last());
});

$(document).on('click', '.flex-item' ,function(){
  $(this).toggleClass('flexActive')
})
.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    -webkit-flex-direction: row; /* Safari */
    flex-direction:  row;
    flex-wrap:  wrap;
}
.flex-item {
    background: green;
    padding: 5px;
    width: 100px;
    height: 150px;
    margin-top: 10px;
    margin-right: 15px;
    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
    display: inline-block;
    
}
.flexActive{
  width:auto;
  display:block;
  flex: 1 1;
  margin-right:0;
}

ul li{
  display: inline;
}




.enlarge{
 zoom: 350%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">

<!-- add LI here -->
</ul>


<button id="clickMe">Click Me</button>

<div class="enlarge">
<span>&#8674;</span>
</div>

Answers 1

  • Try to something like this.

    $('#clickMe').click(function() {
    		    $('#Demosss').append($('<li  class="flex-item">').text('text'))
    		    $('.enlarge').css('display','none');
    		    $('#Demosss').append($('<div class="enlarge1"><span>&#8674;</span></div>'))
    		    $(this).insertAfter($('[class^="flex-item"]').last());
    		});
    
    		$(document).on('click', '.flex-item' ,function(){
    		  $(this).toggleClass('flexActive')
    		})
    .flex-container {
    	    padding: 0;
    	    margin: 0;
    	    list-style: none;
    	    -webkit-flex-direction: row; /* Safari */
    	    flex-direction:  row;
    	    flex-wrap:  wrap;
    	}
    	.flex-item {
    	    background: green;
    	    padding: 5px;
    	    width: 100px;
    	    height: 150px;
    	    margin-top: 10px;
    	    margin-right: 15px;
    	    line-height: 150px;
    	    color: white;
    	    font-weight: bold;
    	    font-size: 3em;
    	    text-align: center;
    	    display: inline-block;
    	    
    	}
    	.flexActive{
    	  width:auto;
    	  display:block;
    	  flex: 1 1;
    	  margin-right:0;
    	}
    
    	ul li{
    	  display: inline;
    	}
    
    
    	.enlarge1{
    		zoom: 350%;
    	}
    
    	.enlarge{
    	 zoom: 350%;
    	}
    <!-- jQuery library -->
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    
    	<!-- Latest compiled JavaScript -->
    	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <ul id="Demosss" class="flex-container">
    
    	<!-- add LI here -->
    	</ul>
    
    
    	<button id="clickMe">Click Me</button>
    	<div class="enlarge"><span>&#8674;</span></div>
    	<div class="arrow">
    	</div>


Related Articles